Make tabs smaller #12003
Make tabs smaller #12003
Conversation
Fomantic's tabs are excessively wide and with another tab added on the repo tabbar (go-gitea#8346) it would break the layout on the english language. Globally reduce tab bar padding to around half of the previous values.
GiteaBot
added
the
lgtm/need 2
|
Few more tweaks incoming. Issue is arc-green styles the admin menu like tabs but base style doesn't (only border-bottom). I'm trying to get both look like tabs. |
|
I don't necessarily agree with changing bottom/top padding
|
|
Tweaks done, OP screenshots updated. |
padding-right: 1em
padding-left: 1em
|
|
The change made to admin tab causes active tab to have different positioning then non-active.
|
|
Also it looks weird having them tabs on arc-green but normal on base theme |
|
@CirnoT try latest changes, I removed the tab styling in arc-green. |
|
1em (16px) seems to much but I I'll restore to 12px. |
|
You can try arc-green looks fine now. |
|
Tweaks done. Tabs are now 40px high in all cases. |
|
No, I still don't agree with padding such low as 4px, it needs to be at least 12px
Visually there is literally no change. These are main tabs and they need to be big because they're main navigation. |
They're 37px, and if you were going for GH look with 40px, they also have 3px border on top :> |
|
10px with min-width 36px keeps them at 40px; we've been over it. I won't settle for less than 12px, otherwise they're unusable for me and that is what I care about. |
|
And at the risk of repeating myself AGAIN, they look visually big ONLY on arc-green because of color contrast. Try switching to default theme and see for yourself how small they really are in term of clickable area. |
And you do, by whole 2.5px if you go with 12px |
|
I don't know. 10px seems fine to me padding-ratio wise. 12px seems just slightly too tall. Maybe I'm just too used to tabs on pages like GitHub that also don't have such tall tabs. Do 4px really make such a difference?
|
|
They are originally 46.59px, reducing them by almost 7px is too much change. |
|
They are going from 45px (check inactive, active one has 1px more) to 40px. My point is we can't reduce width without some height reduction as well to maintain their general appearange. |
|
How about 11px? 🤪 |
|
Acceptable 👍 |
|
Another fix regarding
Overruled that background for the repo settings where it'd look odd when present:
|
GiteaBot
added
lgtm/need 1
GiteaBot
added
lgtm/done
|
🚀 |
* Make tabs smaller Fomantic's tabs are excessively wide and with another tab added on the repo tabbar (go-gitea#8346) it would break the layout on the english language. Globally reduce tab bar padding to around half of the previous values. * disable no-duplicate-selectors linter rule * more tab bar tweaks * more tweaks * merge rules and nesting * remove arc-green weird hover color * few more arc-green tweaks * restore to 12px * tweaks * use half width height padding * final tweak * 10px * remove min-height * 11px * remve new-menu background on light theme too * background fixes for new-menu Co-authored-by: Lauris BH <lauris@nix.lv> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Fomantic's tabs are excessively wide and with another tab added on the repo tab bar (#8346) it would break the layout on the english language.
Globally reduce tab bar padding to around half of the previous values. Also the "pointing" tab bar now follows the original styling more in arc-green.
Before:
After: