From fb00dd04aa5ae5374607c73af39212c6c4f52a51 Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Sat, 11 Jul 2026 16:52:59 +0530
Subject: [PATCH 1/2] fix(docs): fit topbar within phone viewports

---
 docs/app/components/ui/site-nav.tsx |  2 +-
 docs/app/styles/atoms.css           | 10 ++++++++++
 docs/app/styles/docs.css            | 14 ++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/docs/app/components/ui/site-nav.tsx b/docs/app/components/ui/site-nav.tsx
index d7916e80..7543882b 100644
--- a/docs/app/components/ui/site-nav.tsx
+++ b/docs/app/components/ui/site-nav.tsx
@@ -123,7 +123,7 @@ function SdkSelect() {
         onClick={() => setOpen((o) => !o)}
       >
         <span className="sdk-dd-icon">{SDK_ICONS[active.id]}</span>
-        <span>{active.label}</span>
+        <span className="sdk-dd-name">{active.label}</span>
         <ChevronDown className="sdk-caret" size={13} aria-hidden="true" />
       </button>
       {open ? (
diff --git a/docs/app/styles/atoms.css b/docs/app/styles/atoms.css
index 9503a6cd..f8104102 100644
--- a/docs/app/styles/atoms.css
+++ b/docs/app/styles/atoms.css
@@ -351,6 +351,16 @@
   .kbar {
     display: none;
   }
+  /* Tighten the bar so its min-content width fits small phones (375px) —
+     otherwise the whole page gains a horizontal scroll and the right-side
+     icons land off-screen. */
+  .nav {
+    gap: 12px;
+    padding: 14px 16px;
+  }
+  .navright {
+    gap: 8px;
+  }
   .foot-grid {
     grid-template-columns: 1fr 1fr;
   }
diff --git a/docs/app/styles/docs.css b/docs/app/styles/docs.css
index 9f68d47c..a9c41c2c 100644
--- a/docs/app/styles/docs.css
+++ b/docs/app/styles/docs.css
@@ -52,6 +52,20 @@ body {
   .side-search {
     display: flex;
   }
+  /* The dropdown button already names the SDK; the label is dead weight at
+     phone widths where the topbar is fighting for room. */
+  .sdk-dd-label {
+    display: none;
+  }
+}
+@media (max-width: 480px) {
+  /* Collapse the SDK picker to its language icon + caret so the topbar's
+     min-content width fits small phones (down to 320px) without pushing the
+     theme/GitHub buttons off-screen. The icon still identifies the SDK and
+     the accessible name is unchanged. */
+  .sdk-dd-name {
+    display: none;
+  }
 }
 .side-search:hover {
   border-color: var(--line3);

From 0aab3e955451974b30ef48a3bc4e5184ef7c4e0b Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Sat, 11 Jul 2026 16:53:27 +0530
Subject: [PATCH 2/2] fix(docs): wrap long inline code on phones

---
 docs/app/styles/changelog.css | 3 +++
 docs/app/styles/docs.css      | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/docs/app/styles/changelog.css b/docs/app/styles/changelog.css
index 57210657..bf7b5079 100644
--- a/docs/app/styles/changelog.css
+++ b/docs/app/styles/changelog.css
@@ -134,6 +134,9 @@
   padding: 1px 5px;
   border-radius: 5px;
   color: var(--txt);
+  /* Long identifiers (env vars, dotted paths) must break rather than widen
+     the page into a horizontal scroll on phones. */
+  overflow-wrap: anywhere;
 }
 .rel-earlier {
   margin-top: 6px;
diff --git a/docs/app/styles/docs.css b/docs/app/styles/docs.css
index a9c41c2c..0f5e51bb 100644
--- a/docs/app/styles/docs.css
+++ b/docs/app/styles/docs.css
@@ -398,6 +398,9 @@ body {
   padding: 1.5px 6px;
   border-radius: 5px;
   color: var(--txt);
+  /* Long identifiers (env vars, dotted paths) must break rather than widen
+     the page into a horizontal scroll on phones. */
+  overflow-wrap: anywhere;
 }
 .article a {
   color: var(--indigo-br);