From c2552ad2d38727f939e93f34e6a670adf873e49a Mon Sep 17 00:00:00 2001
From: Marco Walz <marco.walz@dfinity.org>
Date: Tue, 17 Mar 2026 10:00:20 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20mobile=20responsive=20=E2=80=94=20nav=20?=
 =?UTF-8?q?tabs,=20install=20commands,=20and=20browse=20hints?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove flex-wrap on nav tabs to prevent theme toggle wrapping to 2nd row
- Reduce tab padding/font on mobile to fit "Get Started" label
- Show install command on browse cards at mobile with short form (--skill name)
- Show hero install hint full-width below search instead of hiding it
---
 src/components/BrowseTab.tsx |  3 ++-
 src/layouts/SiteLayout.astro |  2 +-
 src/styles/global.css        | 13 +++++++++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/BrowseTab.tsx b/src/components/BrowseTab.tsx
index 58e6001..435b0b2 100644
--- a/src/components/BrowseTab.tsx
+++ b/src/components/BrowseTab.tsx
@@ -215,7 +215,8 @@ export default function BrowseTab({ skills }: Props) {
                   whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
                   minWidth: 0,
                 }}>
-                  {installCmd}
+                  <span className="install-cmd-full">{installCmd}</span>
+                  <span className="install-cmd-short" style={{ display: "none" }}>--skill {skill.name}</span>
                 </code>
                 <CopyButton text={installCmd} />
               </div>
diff --git a/src/layouts/SiteLayout.astro b/src/layouts/SiteLayout.astro
index fa8bed6..70bc43a 100644
--- a/src/layouts/SiteLayout.astro
+++ b/src/layouts/SiteLayout.astro
@@ -45,7 +45,7 @@ const tabs = [
         <div style="display:flex;align-items:baseline;gap:14px;flex-shrink:0;">
           <a href="/" style="font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:18px;letter-spacing:-0.02em;color:var(--text-primary);line-height:1;text-decoration:none;">Internet Computer (ICP) Skills</a>
         </div>
-        <div style="display:flex;gap:4px;align-items:center;flex-wrap:wrap;">
+        <div class="nav-tabs-row" style="display:flex;gap:4px;align-items:center;">
           {tabs.map((tab) => (
             <a
               href={tab.href}
diff --git a/src/styles/global.css b/src/styles/global.css
index ec5047b..a93fe33 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -444,6 +444,11 @@ a:focus-visible {
     padding: 0 16px !important;
   }
 
+  .nav-tabs-row a {
+    padding: 6px 10px !important;
+    font-size: 13px !important;
+  }
+
   main {
     padding: 20px 16px 48px !important;
   }
@@ -484,10 +489,14 @@ a:focus-visible {
     padding: 16px !important;
   }
 
-  .skill-card .card-agent-url {
+  .install-cmd-full {
     display: none !important;
   }
 
+  .install-cmd-short {
+    display: inline !important;
+  }
+
   .step-grid {
     grid-template-columns: 1fr !important;
     gap: 12px !important;
@@ -531,7 +540,7 @@ a:focus-visible {
   }
 
   .endpoint-hint {
-    display: none !important;
+    flex: 1 1 100% !important;
   }
 
   .endpoint-desc {