fix(ui): fit request controls and titles on mobile

2026-07-22 20:48:47 +00:00
parent 9d22985e1a
commit 91177230d7
2 changed files with 36 additions and 15 deletions
@@ -80,13 +80,22 @@ export function Layout({ children }: { children: ReactNode }) {
 									>
 										Settings
 									</Link>
-									<Link
-										to="/notifications"
+								<Link
+									to="/notifications"
 										className="block px-4 py-2 text-sm text-muted hover:bg-surface-raised hover:text-text md:hidden"
 										onClick={() => setMenuOpen(false)}
+								>
+									Notifications
+								</Link>
+								{user?.role === "ADMIN" && (
+									<Link
+										to="/admin"
+										className="block px-4 py-2 text-sm text-accent hover:bg-surface-raised"
+										onClick={() => setMenuOpen(false)}
 									>
-										Notifications
+										Admin
 									</Link>
+								)}
 									<button
 										onClick={async () => {
 											await logout();
@@ -102,14 +111,14 @@ export function Layout({ children }: { children: ReactNode }) {
 					</div>
 				</div>
 				{/* mobile nav */}
-				<nav className="flex snap-x items-center gap-1 overflow-x-auto border-t border-border px-3 py-2 md:hidden sm:px-4">
+				<nav className="flex items-center justify-between gap-1 border-t border-border px-3 py-2 md:hidden sm:px-4">
 					{navItems.map((item) => (
 						<NavLink
 							key={item.to}
 							to={item.to}
 							end={item.end}
 							className={({ isActive }) =>
-								`whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium ${
+								`whitespace-nowrap rounded-lg px-2 py-1.5 text-sm font-medium ${
 									isActive ? "bg-surface-raised text-text" : "text-muted"
 								}`
 							}
@@ -117,11 +126,6 @@ export function Layout({ children }: { children: ReactNode }) {
 							{item.label}
 						</NavLink>
 					))}
-					{user?.role === "ADMIN" && (
-						<NavLink to="/admin" className="whitespace-nowrap rounded-lg px-3 py-1.5 text-sm text-accent">
-							Admin
-						</NavLink>
-					)}
 				</nav>
 			</header>