From 0321c3cdfb2af99402adf472af0ccbf0f1c7ca5c Mon Sep 17 00:00:00 2001
From: Abraham <anubra266@gmail.com>
Date: Wed, 22 Jul 2026 16:05:04 -0700
Subject: [PATCH] chore(visimer/site): tighten navbar on mobile (#2854)

Nav links + 'Leave a star!' hand-drawn hint overflowed the viewport on
< 640px, pushing the GitHub star + npm install buttons offscreen. Hides
both on mobile and tightens header padding; desktop is unchanged.

GitOrigin-RevId: cd181e899214fc34359f5a4d4e0916caec3bfbe7
---
 apps/site/src/App.tsx  |  4 +++-
 apps/site/src/site.css | 13 +++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/apps/site/src/App.tsx b/apps/site/src/App.tsx
index 9c02205..e034279 100644
--- a/apps/site/src/App.tsx
+++ b/apps/site/src/App.tsx
@@ -384,6 +384,7 @@ export default function App() {
         }}
       >
         <div
+          className="site-header-row"
           style={{
             maxWidth: 1180,
             margin: '0 auto',
@@ -408,7 +409,7 @@ export default function App() {
             <Logo size={26} />
             Visimer
           </a>
-          <nav style={{ display: 'flex', gap: 22, marginLeft: 6, fontSize: 14.5 }}>
+          <nav className="site-nav" style={{ display: 'flex', gap: 22, marginLeft: 6, fontSize: 14.5 }}>
             <a href="#demo" style={{ color: '#6B6559' }}>
               Playground
             </a>
@@ -444,6 +445,7 @@ export default function App() {
             </a>
             <div
               aria-hidden
+              className="site-star-hint"
               style={{
                 position: 'absolute',
                 top: 'calc(100% + 14px)',
diff --git a/apps/site/src/site.css b/apps/site/src/site.css
index 82a52ef..cea9251 100644
--- a/apps/site/src/site.css
+++ b/apps/site/src/site.css
@@ -165,3 +165,16 @@ textarea {
 .demo-pane-dark .demo-cm .tok-bracket {
   color: #9c968a;
 }
+
+/* Mobile: hide the middle nav links + the "Leave a star!" hint so the
+   navbar has room for the wordmark + GitHub star + npm install button. */
+@media (max-width: 640px) {
+  .site-nav,
+  .site-star-hint {
+    display: none !important;
+  }
+  .site-header-row {
+    padding: 12px 16px !important;
+    gap: 10px !important;
+  }
+}