firefox-devtools / ux

Firefox DevTools UX Community
Mozilla Public License 2.0
103 stars 21 forks source link

Make toolbox tab spacing a bit tighter #119

Open fvsch opened 4 years ago

fvsch commented 4 years ago

We could "win" a bit of spacing in the toolbox toolbar by making tab spacing a bit tighter. Currently we use this:

| 8px [icon] 6px [label] 8px |

and we could decrease spacing to:

| 6px [icon] 5px [label] 6px |

Here is how it looks:

It's a 5px win per tab, so for 10 tabs we get back 50px. Not huge, but if it feels right it's a quick win.

/cc @violasong @digitarald @martinbalfanz

digitarald commented 4 years ago

@fvsch I like it, making tools work better for small spaces is common feedback. Would be nice to have this responsively applied, to give tabs more space on large viewports.

violasong commented 4 years ago

I've been looking at this and feeling unsure, but I could probably get used to it :D. Responsive would be good, and either way, it would be great to do this for vertical mode.

I realized there's another place where I'd love to see this treatment - the sidebar tabs. They actually look a little too wide to me at the moment. Would be a nice complement to #114.

digitarald commented 4 years ago

Seems like there is a general agreement to apply this smaller spacing for sidebar-tabbars and in vertical mode.

digitarald commented 4 years ago

@violasong as we are touching up the Network panel anyways, should we try the smaller tab space there first?

violasong commented 4 years ago

Yes, that would be great!

digitarald commented 4 years ago

Filed https://bugzilla.mozilla.org/show_bug.cgi?id=1641405 for Network