fix: collapse the navbar into a menu on small screens #4

Merged

jfro merged 2 commits from jtk/mobile-nav into main

2026-10-18 15:52:23 +00:00

jfro commented

2026-10-18 15:43:13 +00:00

Owner

Fixes GitHub #36 (old mirror): on a phone the top bar's links ran wider than the screen, which dragged pages like the batch scanner wider too.

What changed

Navbar: below lg, the links collapse into a hamburger dropdown (#mobile-nav) with the same items (Home, Library, Add Book, Admin, account settings, theme, log out; or Log in / Register). Desktop is unchanged. Links are shared function components, so the two menus can't drift.
<.header>: actions wrap under the title on narrow screens.
Batch scanner: header and status badge wrap, stats stack vertically on phones, nav buttons wrap.
Admin: tabs wrap, sync cards use grid-cols-1 so they can shrink, users table scrolls inside its card.

Testing

At 390px (phone), every page I checked is now exactly screen width: /, /books, /books/new, /books/batch-scanner, /admin, /admin/users, /admin/settings, /admin/import-export, /users/settings (before: / was 694px wide).
Desktop (1280px) nav looks the same as before.
New tests check the collapsed menu's links for guests and signed-in users.
mix precommit: 150 passed.

Fixes GitHub #36 (old mirror): on a phone the top bar's links ran wider than the screen, which dragged pages like the batch scanner wider too. **What changed** - Navbar: below `lg`, the links collapse into a hamburger dropdown (`#mobile-nav`) with the same items (Home, Library, Add Book, Admin, account settings, theme, log out; or Log in / Register). Desktop is unchanged. Links are shared function components, so the two menus can't drift. - `<.header>`: actions wrap under the title on narrow screens. - Batch scanner: header and status badge wrap, stats stack vertically on phones, nav buttons wrap. - Admin: tabs wrap, sync cards use `grid-cols-1` so they can shrink, users table scrolls inside its card. **Testing** - At 390px (phone), every page I checked is now exactly screen width: `/`, `/books`, `/books/new`, `/books/batch-scanner`, `/admin`, `/admin/users`, `/admin/settings`, `/admin/import-export`, `/users/settings` (before: `/` was 694px wide). - Desktop (1280px) nav looks the same as before. - New tests check the collapsed menu's links for guests and signed-in users. - `mix precommit`: 150 passed.

jfro added 1 commit

2026-10-18 15:43:13 +00:00

fix: collapse the navbar into a menu on small screens

CI / test (pull_request) Failing after 32s

Details

1f4f12f82f

The top bar's links didn't fit a phone, so it ran wider than the screen and
dragged other pages, like the batch scanner, wider with it (GitHub #36).
Below the lg breakpoint the links now sit in a hamburger dropdown. Page
headers, the admin tabs and sync cards, the users table, and the batch
scanner's status and stats now wrap or scroll instead of overflowing.

jfro added 1 commit

2026-10-18 15:46:20 +00:00

fix: guest menu links accept a nil class without a compile warning

CI / test (pull_request) Successful in 34s

Details

389718c206

jfro referenced this pull request

2026-10-18 15:51:56 +00:00

[low] Hardcoded light colors in admin and settings pages look wrong in the dark theme #16

jfro commented

2026-10-18 15:52:10 +00:00

Author

Owner

Review from Nye (approved) — nav_links/account_links/guest_links remove the duplication, mobile dropdown has aria-label, no duplicate DOM ids (theme_toggle uses data attrs only), tests check guest vs signed-in links. Optional nit: in the mobile menu, Register keeps btn btn-primary, which looks heavy inside a menu list; fine to leave.

**Review from Nye (approved)** — nav_links/account_links/guest_links remove the duplication, mobile dropdown has aria-label, no duplicate DOM ids (theme_toggle uses data attrs only), tests check guest vs signed-in links. Optional nit: in the mobile menu, Register keeps btn btn-primary, which looks heavy inside a menu list; fine to leave.

jfro merged commit e61cf716cb into main

2026-10-18 15:52:23 +00:00

jfro referenced this pull request from a commit

2026-10-18 15:52:23 +00:00

fix: collapse the navbar into a menu on small screens (#4)

jfro deleted branch jtk/mobile-nav

2026-10-18 15:52:23 +00:00