Customize UI tab width of Atom Material


I really liked the Atom Material Theme by silvestreh,

but I want to customize the tab width similar to how the tabs of Dark Flat UI by olmokramer works.

As you can see, the tabs auto-adjust their widths with respect to the number of tabs existing.

I prefer this kind of UI/UX presentation to maximize the clicking space for each present tab.
Anyone has knowledge what to tweak on the Atom Material Theme’s source code to achieve this? Many thanks.


Open up your stylesheet and add

.tab-bar {
  .tab {
    max-width: initial;


Thanks! Although the active tab’s width isn’t correlative with the inactive one’s, I think this will do. :smile:


For equal tab widths for both active and inactive tabs, you can use:

.tab-bar {
  -webkit-flex: 1;
  flex: 1;


Many thanks! :smile:


Whats the class name for in-active? , .tab.inactive?


NVM figured it out w --dev , It is neither that I mentioned above it is active or it is not. So just .tab


No, there is no CSS class for inactive tabs, but you can use the :not() selector if you want to select only inactive tabs, like .tab:not(.active).