From db15b7f8417c3d89ea3d6492ffbeba35fa37759c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 24 May 2026 02:50:58 +0000
Subject: [PATCH] Align engagement / profile icons with their numbers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The classic SVG-vs-text-baseline mismatch: body sets line-height: 1.7,
which makes each text span's line-box ~24px tall while a 14–16px icon
occupies just its own height. align-items: center then centers them
geometrically, but the text's optical midline (x-height) sits below
the geometric center, so the icon visually floats above the number.

Collapses line-height to 1 on the three offending rows so the text's
line-box matches the icon height:

  * EngagementSidecar (record explorer)
  * PostPreview's footer stats (replies / reposts / likes / quotes)
  * .profile-stat-item / .profile-join-date (profile previews)

EngagementSidecar's icon span also gets display: inline-flex +
alignItems: center as belt-and-braces in case any icon ships with its
own line-box padding.
---
 src/app/globals.css                          |  5 +++++
 src/components/PostPreview.tsx               |  3 +++
 src/components/explore/EngagementSidecar.tsx | 20 ++++++++++++++++++--
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 0882431..824280e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -737,12 +737,17 @@ html {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  /* Collapse the inherited line-height (body: 1.7) so the text's line-box
+     matches the icon's geometric height — without this, align-items:
+     center floats the icon above the optical midline of the text. */
+  line-height: 1;
 }
 
 .profile-join-date {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  line-height: 1;
 }
 
 /* Skeleton Loading Styles */
diff --git a/src/components/PostPreview.tsx b/src/components/PostPreview.tsx
index ffd9c93..4615cde 100644
--- a/src/components/PostPreview.tsx
+++ b/src/components/PostPreview.tsx
@@ -1237,6 +1237,9 @@ export default function PostPreview({ post, parent }: PostPreviewProps) {
           borderTop: '1px solid var(--border-color)',
           fontSize: '0.875rem',
           color: 'var(--text-tertiary)',
+          // Collapse inherited line-height so icons align to the text
+          // midline (body's default of 1.7 was floating them above).
+          lineHeight: 1,
         }}
       >
         <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
diff --git a/src/components/explore/EngagementSidecar.tsx b/src/components/explore/EngagementSidecar.tsx
index 965b133..5ea2300 100644
--- a/src/components/explore/EngagementSidecar.tsx
+++ b/src/components/explore/EngagementSidecar.tsx
@@ -86,10 +86,26 @@ export default function EngagementSidecar({ did, collection, atUri }: Props) {
       {items.map((item) => (
         <div
           key={item.label}
-          style={{ display: 'inline-flex', alignItems: 'center', gap: '0.4rem' }}
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '0.4rem',
+            // Collapse line-height so icon and number sit on the same
+            // optical line (body's 1.7 line-height was floating the icon
+            // above the text midline).
+            lineHeight: 1,
+          }}
           title={item.label}
         >
-          <span style={{ color: 'var(--text-tertiary)' }}>{item.icon}</span>
+          <span
+            style={{
+              color: 'var(--text-tertiary)',
+              display: 'inline-flex',
+              alignItems: 'center',
+            }}
+          >
+            {item.icon}
+          </span>
           <span style={{ fontVariantNumeric: 'tabular-nums', color: 'var(--text-primary)' }}>
             {item.value.toLocaleString()}
           </span>
-- 
2.51.2