From e38866c37200752c82161f179847aa9adf53639d Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 29 Jun 2026 14:49:27 -0400
Subject: [PATCH] feat(mobile): profile modal tabs become an app-grid (#7)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 <noreply@anthropic.com>
---
 css/tailwind.source.css | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index 8a69aaf5..479712d5 100644
--- a/css/tailwind.source.css
+++ b/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")) {