peezy-tech/jojo
2
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2026-05-12 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(ui): apply navbar min-height correctly, fix jitter on mobile (#11274)

Browse source 
Replaces https://codeberg.org/forgejo/forgejo/pulls/11271

This rule was problematic and didn't quite make sense:
* the intention is to have a navbar that is 48px+1px border
* we apply `min-height:49px` to: `#navbar` with intention of making it 49px tall total, with border
* but we also apply it to `#navbar .navbar-left/right`
* elements `#navbar .navbar-left/right` become 49px tall
* their parent `#navbar` becomes 49px+1px border = 50px, overriding what was done in step 2

This height missmatch had an incompatibility with this definition for open menu inside of navbar on mobile, causing jitter when the menu is opened/closed, because it was expecting navbar body to be 48px, but due to the rule that was removed it was actually 49px.

```css
#navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
	    min-height: 48px;
}
```

The fix is to only apply `min-height` to `#navbar`'s children. At least `.navbar-left` is always expected to be present unconditionally on all pages. This does make the navbar 1px shorter. If we still want a 50px navbar but without the bug let me know and I'll adjust.

### Preview by @panc

From https://codeberg.org/forgejo/forgejo/pulls/11271, also applies to this PR.

| Before | After |
|----|----|
| <video src="/attachments/515fdfc1-cb97-46af-88ac-9bb0e216a996" title="Screencast From 2026-02-13 19-56-32" controls></video> | <video src="/attachments/133d1499-4660-402d-8082-f407b3644e5c" title="Screencast From 2026-02-13 19-57-29" controls></video> |

Reported-by: panc <panc@noreply.codeberg.org>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11274
Reviewed-by: Robert Wolff <mahlzahn@posteo.de>
This commit is contained in:
0ko 2026-02-14 14:57:44 +01:00
parent 62ad4669f9
commit 89bff31287
1 changed files with 1 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

7
web_src/css/modules/navbar.css
View file

@ -8,17 +8,12 @@
padding: 0 10px;
}
#navbar,
#navbar .navbar-left,
#navbar .navbar-right {
min-height: 49px; /* +1px border-bottom */
}
#navbar .navbar-left,
#navbar .navbar-right {
margin: 0;
display: flex;
align-items: center;
min-height: 48px;
}
#navbar-logo {