space/patchpass
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): improve mobile browser support

Browse Source
This commit is contained in:
Luna
2026-07-22 20:16:16 +00:00
parent b95811a4e5
commit eceb926d91
12 changed files with 46 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/src/components/Layout.tsx
+7 -7
View File
@@ -18,11 +18,11 @@ export function Layout({ children }: { children: ReactNode }) {
return (
<div className="min-h-screen">
<header className="sticky top-0 z-30 border-b border-border bg-bg/80 backdrop-blur">
<div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
<div className="flex items-center gap-6">
<div className="mx-auto flex max-w-6xl items-center justify-between gap-2 px-3 py-3 sm:px-4">
<div className="flex min-w-0 items-center gap-3 sm:gap-6">
<Link to="/" className="flex items-center gap-2">
<span className="text-xl">✅</span>
<span className="text-lg font-bold tracking-tight">
<span className="hidden text-xl xs:inline">✅</span>
<span className="text-base font-bold tracking-tight sm:text-lg">
Patch<span className="text-primary">Pass</span>
</span>
</Link>
@@ -56,7 +56,7 @@ export function Layout({ children }: { children: ReactNode }) {
</nav>
</div>
<div className="flex items-center gap-2">
<div className="flex shrink-0 items-center gap-1 sm:gap-2">
<NotificationBell />
<div className="relative">
<button
@@ -102,7 +102,7 @@ export function Layout({ children }: { children: ReactNode }) {
</div>
</div>
{/* mobile nav */}
<nav className="flex items-center gap-1 overflow-x-auto border-t border-border px-4 py-2 md:hidden">
<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">
{navItems.map((item) => (
<NavLink
key={item.to}
@@ -125,7 +125,7 @@ export function Layout({ children }: { children: ReactNode }) {
</nav>
</header>
<main className="mx-auto max-w-6xl px-4 py-8">{children}</main>
<main className="mx-auto max-w-6xl px-3 py-5 sm:px-4 sm:py-8">{children}</main>
<footer className="mx-auto max-w-6xl px-4 py-8 text-center text-xs text-faint">
<div className="flex flex-wrap items-center justify-center gap-3">