How to make the tabs smaller?

#1

Hey all,

before the update the tabs were a lot smaller and I personally preferred that to the new tabs, is there a way to shorten the tabs :smile:

#2

Assuming you’re using one of the default One themes, you can change it’s layout mode either from the Settings view of the theme, or by adding this to your ~/.atom/config.cson` file

"*":
  # other stuff...
  "one-dark-ui":
    layoutMode: "Compact"
  # ...

The supported modes are Auto (default), Compact, and Spacious. The automatic mode adjusts between the two other modes based on the window size.

#3

Found the issue, as you suggested it was to do with the one-dark-ui theme :smile: thank you! :smiley:

#4

In One theme’s case, you could also customize them more in your styles.less file. An example would be:

.theme-one-dark-ui,
.theme-one-light-ui {
  .tab-bar {
    font-size: 10px; // smaller font size
  }
  .tab {
    min-width: 10em; // larger minimum width
    max-width: 16em; // smaller max width
  }
}
Tabs just became huge for no reason?
#5

Is this an actual issue or working as intended? The new tabs take up a good 5% of my screen, which seems ENTIRELY unnecessary.

I shouldn’t have to edit CSS as a user to fix what looks bad, should I? At the very least maybe add the options to a GUI somewhere?

#6

Nevermind! I found the dropdown just after posting.

It’s kind of confusing to have to find the package and edit the settings. Maybe consider making it more prominent?

EDIT: Ok this explains why I couldn’t find it before…

Window 1:

http://imgur.com/mF8fgn0

Window 2:

http://imgur.com/qqo08Z6

One of my windows doesn’t even show the settings button. Perhaps we should add a link to settings right below the “Theme” and “Syntax” drop downs as well to alleviate any confusion?

Tabs just became huge for no reason?
#7

“What looks bad” is highly subjective. What you may consider to be taking entirely too much space, may be just right for someone who wants bigger click targets. But no, you don’t have to edit CSS to change things. There are four UI themes (and more syntax themes) included with Atom on its initial installation and there are many more than that available for installation from https://atom.io/themes.

But using CSS to tweak things to your personal taste if things are pretty close is always an option too :grinning:

There’s actually a Pull Request being worked on right now to put settings buttons next to the theme selectors on the Themes. I think @mnquintana is working on it? So this is already in the works.

#8

Haha “what looks bad” isn’t out I meant it. I meant “what looks bad to me”. Sorry about that.

It would seem that we want this editor to be usable by the masses (otherwise Settings would be all JSON/CSON/YAML instead of such a beautiful menu). I was hoping to see customizing tabs to get the same love (awesome on the pull request!)

Did you see my follow up? There seems to be a bug with the settings button not always showing up, which explains all my problems in the first place :slight_smile: If you’re not familiar, maybe I should post that as an issue?

#9

Yes, I saw your follow up and my mention of the Pull Request is in direct response to that. Here’s a link to the PR:

#10

Amazing! Thanks @leedohm. You do good work around here and I know you have to deal with a lot of bullshit. Keep it up!

#11

There seems to be a bug with the settings button not always showing up

It might be this issue: https://github.com/atom/settings-view/issues/347

Re: wide tabs. I agree that just by looking at them, they seem a bit wide. But some people use quite long file names 1 + 2, so not having them cut off too early makes the tabs more usable for them. It’s always a balancing act to find a way that works for most people. That’s why it’s nice to be able to customize with CSS if you really want/need to.

#12

It’s been merged! It’ll be in the next release (Atom 0.199.0)

#13

Well, actually it is a programming editor. But I guess some programmers might be classified as part of the masses. (grin)