mobile design refactor

frontend/src/routes/+layout.svelte

@@ -18,6 +18,14 @@
 
   const ticker =
     'CONSUME · SPEND · ACCUMULATE · YOU DESERVE IT · TREAT YOURSELF · ONE MORE WON’T HURT · DEBT IS A LIFESTYLE · ';
+
+  // Mark a tab active when the current path matches (or sits under) its href.
+  const path = $derived(page.url.pathname);
+  function active(href: string): boolean {
+    return href === '/lists'
+      ? path === '/lists' || path.startsWith('/lists/')
+      : path === href || path.startsWith(href + '/');
+  }
 </script>
 
 <div class="min-h-dvh flex flex-col">
@@ -33,25 +41,43 @@
 
   <!-- Header -->
   <header class="border-b-2 border-smoke">
-    <div class="mx-auto flex max-w-5xl items-center justify-between px-4 py-4">
-      <a href="/" class="group flex items-baseline gap-2">
+    <div class="mx-auto flex max-w-5xl items-center justify-between gap-2 px-4 py-3 sm:py-4">
+      <a href="/" class="group flex shrink-0 items-baseline gap-2">
         <span
-          class="glitch flicker font-display text-2xl font-bold tracking-tighter text-ink"
+          class="glitch flicker font-display text-xl font-bold tracking-tighter text-ink sm:text-2xl"
           data-text="consume·rs"
         >
           consume<span class="text-iris">·</span>rs
         </span>
       </a>
 
-      <nav class="flex items-center gap-2 text-sm">
+      <nav class="flex min-w-0 items-center gap-1 text-sm sm:gap-2">
         {#if auth.loaded && auth.user}
-          <a href="/lists" class="tag border-smoke text-mute hover:text-iris">lists</a>
-          <a href="/subscriptions" class="tag border-smoke text-mute hover:text-iris">following</a>
-          <a href="/settings" class="tag border-smoke text-mute hover:text-iris">
-            {auth.user.display_name ?? auth.user.email}
+          <a
+            href="/lists"
+            class="tag {active('/lists') ? 'border-iris text-iris' : 'border-smoke text-mute hover:text-iris'}"
+            aria-current={active('/lists') ? 'page' : undefined}>lists</a
+          >
+          <a
+            href="/subscriptions"
+            class="tag {active('/subscriptions') ? 'border-iris text-iris' : 'border-smoke text-mute hover:text-iris'}"
+            aria-current={active('/subscriptions') ? 'page' : undefined}>following</a
+          >
+          <a
+            href="/settings"
+            class="tag max-w-[40vw] truncate sm:max-w-none {active('/settings') ? 'border-iris text-iris' : 'border-smoke text-mute hover:text-iris'}"
+            aria-current={active('/settings') ? 'page' : undefined}
+          >
+            <span class="sm:hidden">⚙</span>
+            <span class="hidden sm:inline">{auth.user.display_name ?? auth.user.email}</span>
           </a>
-          <button class="btn btn-ghost !px-3 !py-1 text-xs" onclick={doLogout}>
-            logout
+          <button
+            class="btn btn-ghost !px-2 !py-1 text-xs sm:!px-3"
+            onclick={doLogout}
+            aria-label="log out"
+          >
+            <span class="sm:hidden">⏏</span>
+            <span class="hidden sm:inline">logout</span>
           </button>
         {:else if auth.loaded}
           {#if page.url.pathname !== '/login'}