Standardize responsive breakpoints (Refs #130)

src/routes/+layout.svelte

@@ -115,11 +115,12 @@
 
     onMount(() => {
         const stopTimeZone = startTimeZonePreference();
-        const desktop = window.matchMedia('(min-width: 961px)');
+        // Keep this identical to the sidebar's CSS query, including fractional widths.
+        const mobileNavigation = window.matchMedia('(max-width: 960px)');
         const closeDrawer = () => {
-            if (desktop.matches) drawerOpen = false;
+            if (!mobileNavigation.matches) drawerOpen = false;
         };
-        desktop.addEventListener('change', closeDrawer);
+        mobileNavigation.addEventListener('change', closeDrawer);
 
         const shortcuts = Object.fromEntries(
             visibleNavigation(data.user?.role ?? 'viewer')
@@ -181,7 +182,7 @@
         window.addEventListener('keydown', onKey);
         return () => {
             stopTimeZone();
-            desktop.removeEventListener('change', closeDrawer);
+            mobileNavigation.removeEventListener('change', closeDrawer);
             window.removeEventListener('keydown', onKey);
             if (armTimer) clearTimeout(armTimer);
         };
@@ -705,7 +706,7 @@
             margin-left: 0;
         }
     }
-    @media (max-width: 720px) {
+    @media (max-width: 640px) {
         .app-header {
             padding-inline: var(--space-2);
             gap: var(--space-1);

src/routes/+page.svelte

@@ -1019,7 +1019,7 @@
         overflow: hidden;
         clip-path: inset(50%);
     }
-    @media (max-width: 1000px) {
+    @media (max-width: 1100px) {
         .attention-row {
             grid-template-columns: minmax(0, 1fr) auto;
         }
@@ -1027,7 +1027,7 @@
             grid-column: 1;
         }
     }
-    @media (max-width: 600px) {
+    @media (max-width: 640px) {
         .page {
             gap: var(--space-3);
         }