feat(mobile): profile modal tabs become an app-grid (#7)

On mobile (<1024px, the full-width menu view), the profile modal's tab nav
(Account, Relays, Wallet, Storage, …) renders as a 3-column grid of icon tiles
with the title centered below each icon, instead of the vertical list. Desktop
(>=lg) keeps its vertical nav, unchanged.

Scoped to `.profile-modal__nav` inside the existing mobile media query; token-only;
labels wrap at spaces. Validated live in-browser.

(Note: the earlier sidebar app-grid was a misread of the request and was reverted;
this is the intended component.)

Co-Authored-By: Claude Opus 4.8 <[email protected]>

css/tailwind.source.css

@@ -3139,6 +3139,37 @@
     .profile-modal__layout[data-mobile-view="pane"] .profile-modal__menu {
       display: none;
     }
+
+    /* Mobile: the profile tab nav (full-width menu view) becomes an app-grid —
+       icon tiles with the title centered below each icon, instead of the desktop
+       vertical list. Desktop (>=lg) keeps its vertical nav, unchanged. */
+    .profile-modal__nav {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: var(--space-xs);
+    }
+
+    .profile-modal__nav > button {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      text-align: center;
+      gap: var(--space-2xs);
+      width: 100%;
+      padding-block: var(--space-sm);
+      padding-inline: var(--space-2xs);
+      /* wrap labels at spaces, not mid-word */
+      overflow-wrap: break-word;
+      word-break: normal;
+      hyphens: none;
+    }
+
+    /* slightly larger glyph for the tile */
+    .profile-modal__nav > button svg {
+      width: var(--space-lg);
+      height: var(--space-lg);
+    }
   }
 
   @media (min-width: theme("screens.lg")) {