feat(web): mobile dashboard UX polish (#28127)

* feat(web): mobile dashboard UX polish

Bottom sheets for sidebar theme/language pickers on narrow viewports with
enter/exit animation and drag-to-close; inline header badges beside titles;
bottom padding on the route outlet for scroll clearance; profiles loading uses a
unicode braille spinner; align profile/cron card actions to the top; viewport-fit
cover and supporting layout tweaks across dashboard pages.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix Nix web npm hash and mobile sheet accessibility.

Align fetchNpmDeps in nix/web.nix with web/package-lock.json for CI. Improve BottomPickSheet backdrop labeling, avoid aria-hidden on the dialog during exit animation, and wire theme/language sheets with listbox semantics and localized dismiss labels.

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

web/src/pages/ProfilesPage.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { ChevronDown, Pencil, Plus, Terminal, Trash2, Users, X } from "lucide-react";
+import spinners from "unicode-animations";
 import { H2 } from "@/components/NouiTypography";
 import { api } from "@/lib/api";
 import type { ProfileInfo } from "@/lib/api";
@@ -21,6 +22,35 @@ import { usePageHeader } from "@/contexts/usePageHeader";
 // invalid names (uppercase, spaces, …) before round-tripping a doomed POST.
 const PROFILE_NAME_RE = /^[a-z0-9][a-z0-9_-]{0,63}$/;
 
+/** Braille unicode spinner (`unicode-animations`); static first frame when reduced motion is preferred. */
+function ProfilesLoadingSpinner() {
+  const { frames, interval } = spinners.braille;
+  const [frameIndex, setFrameIndex] = useState(0);
+
+  useEffect(() => {
+    if (
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    ) {
+      return;
+    }
+    const id = window.setInterval(
+      () => setFrameIndex((i) => (i + 1) % frames.length),
+      interval,
+    );
+    return () => window.clearInterval(id);
+  }, [frames.length, interval]);
+
+  return (
+    <span
+      aria-hidden
+      className="inline-block select-none font-mono text-xl leading-none text-muted-foreground"
+    >
+      {frames[frameIndex]}
+    </span>
+  );
+}
+
 export default function ProfilesPage() {
   const [profiles, setProfiles] = useState<ProfileInfo[]>([]);
   const [loading, setLoading] = useState(true);
@@ -199,8 +229,14 @@ export default function ProfilesPage() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center py-24">
-        <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+      <div
+        aria-busy="true"
+        aria-live="polite"
+        className="flex items-center justify-center py-24"
+      >
+        <span className="sr-only">{t.common.loading}</span>
+
+        <ProfilesLoadingSpinner />
       </div>
     );
   }
@@ -318,7 +354,7 @@ export default function ProfilesPage() {
           const isEditingSoul = editingSoulFor === p.name;
           return (
             <Card key={p.name}>
-              <CardContent className="flex items-center gap-4 py-4">
+              <CardContent className="flex items-start gap-4 py-4">
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 mb-1 flex-wrap">
                     {isRenaming ? (