From 08de894bc8af2d1c53ec4e227126d286cb7f1547 Mon Sep 17 00:00:00 2001
From: dame <contact@dame.is>
Date: Fri, 3 Jul 2026 11:45:18 -0400
Subject: [PATCH] Polish mobile NSID stacking and repo-glance tile alignment
 (#47)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Mute the remainder line in the stacked mobile NSID

When a trending/top lexicon row's NSID stacks on mobile, render the
remainder (feed.post) in the secondary text color while the top-2-segment
namespace stays at primary. The two lines are easier to tell apart and the
namespace root reads as the anchor.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NyPVCrj1H472WPGMsT1uCZ

* Apply the repo-glance mobile fixes to the /explore demo card

The "Repo at a glance" demo on /explore (RepoGlanceVisual) is a separate
static mock from the live AccountStats grid and kept its own three-column
layout, so on phones it cramped the tiles — wrapping "Aug 2023" and the
two-word labels. Mirror the live fixes here: drop to two columns on mobile,
keep values on one line, and rename "Inbound links" to "Backlinks".

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NyPVCrj1H472WPGMsT1uCZ

* Vertically center the icon with the label in repo-glance tiles

The stat-tile label wrapped its icon in a plain inline span, so the span
inherited the inline SVG's descender space and stood taller than the 16px
glyph. align-items:center then centered that taller box, leaving the icon
sitting optically above the label text. Make the icon wrapper inline-flex
so it hugs the glyph and the icon and label read as one centered row.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NyPVCrj1H472WPGMsT1uCZ

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 src/app/globals.css                         | 20 ++++++++++++++++++++
 src/components/account/AccountStats.tsx     |  8 +++++++-
 src/components/landing/RepoGlanceVisual.tsx | 14 +++++---------
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 6fa8e7e..581de3e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2035,6 +2035,12 @@ html {
     white-space: nowrap;
   }
 
+  /* Mute the remainder line so the top-2-segment namespace reads as the
+     primary anchor and the two stacked lines are easy to tell apart. */
+  .lexicon-row-nsid .lexicon-nsid-tail {
+    color: var(--text-secondary);
+  }
+
   /* No inline joining dot when the segments are stacked. */
   .lexicon-row-nsid .lexicon-nsid-tail::before {
     content: none;
@@ -3039,6 +3045,16 @@ html {
   gap: 0.5rem;
 }
 
+/* Static "Repo at a glance" demo card on /explore. Mirrors the live
+   AccountStats grid: three tiles per row, dropping to two on mobile so the
+   tiles don't get cramped enough to wrap the values ("Aug 2023") or labels. */
+.repo-glance-tiles {
+  padding: 10px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+}
+
 @media (max-width: 600px) {
   .account-stats-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3051,4 +3067,8 @@ html {
   .account-stats-grid .explore-small-caps {
     letter-spacing: 0.05em;
   }
+
+  .repo-glance-tiles {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
diff --git a/src/components/account/AccountStats.tsx b/src/components/account/AccountStats.tsx
index a26ef90..992fe0a 100644
--- a/src/components/account/AccountStats.tsx
+++ b/src/components/account/AccountStats.tsx
@@ -385,7 +385,13 @@ function StatTile({
           color: 'var(--text-tertiary)',
         }}
       >
-        <span style={{ color: 'var(--text-accent)' }}>{icon}</span>
+        {/* inline-flex so the wrapper hugs the 16px glyph instead of
+            inheriting the inline SVG's descender space — otherwise the icon
+            box is taller than the icon and align-items:center pushes the
+            icon optically above the label text. */}
+        <span style={{ display: 'inline-flex', color: 'var(--text-accent)' }}>
+          {icon}
+        </span>
         <span>{label}</span>
       </div>
       <div
diff --git a/src/components/landing/RepoGlanceVisual.tsx b/src/components/landing/RepoGlanceVisual.tsx
index 266f6d9..b7e8992 100644
--- a/src/components/landing/RepoGlanceVisual.tsx
+++ b/src/components/landing/RepoGlanceVisual.tsx
@@ -63,18 +63,11 @@ export default function RepoGlanceVisual() {
         </div>
       </div>
 
-      <div
-        style={{
-          padding: '10px',
-          display: 'grid',
-          gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
-          gap: '6px',
-        }}
-      >
+      <div className="repo-glance-tiles">
         <Tile icon={<Boxes size={13} />} label="Namespaces" value="14" />
         <Tile icon={<Database size={13} />} label="Lexicons" value="63" />
         <Tile icon={<History size={13} />} label="Audit changes" value="8" />
-        <Tile icon={<LinkIcon size={13} />} label="Inbound links" value="2.1k" />
+        <Tile icon={<LinkIcon size={13} />} label="Backlinks" value="2.1k" />
         <Tile
           icon={<CalendarDays size={13} />}
           label="Created"
@@ -155,6 +148,9 @@ function Tile({
           fontWeight: 500,
           color: 'var(--text-primary)',
           lineHeight: 1,
+          // Keep short values (esp. "Aug 2023") on one line in the narrow
+          // mobile tiles instead of breaking at the space.
+          whiteSpace: 'nowrap',
         }}
       >
         {value}
-- 
2.51.2