From 745c44bbd915588b0f3ecd727ed2b2d1e185021d Mon Sep 17 00:00:00 2001
From: Lindsay Auchinachie <lindsay@moderne.io>
Date: Mon, 11 May 2026 15:50:26 -0400
Subject: [PATCH] Tiered responsive footer + narrow-width navbar fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Footer (src/theme/Footer/styles.module.css):
* Drop the docs-page sticky-to-viewport-bottom rule so the footer
  flows as the last block element — content no longer scrolls
  behind it.
* Container is now full-width with --ifm-spacing-horizontal padding
  (instead of 83% width + margin: 0 auto + translateX(-120px)), so
  it left-aligns with the article column at every viewport instead
  of drifting toward center at mid widths.
* flex-wrap: wrap on the container + white-space: nowrap on the
  links lets the Give feedback + social cluster drop to a second
  line when there's no horizontal room — links stay on one line
  rather than each one breaking.
* Below 768px, full vertical stack.
* 1px border-left on docs pages (margin-left: 306px) so the
  sidebar's right-edge divider continues unbroken through the
  footer.

Narrow-width fixes (src/css/custom.css):
* At <=996px: zero out --ifm-secondary-nav-height so the breadcrumb
  doesn't sit below a phantom 48px gap reserved for a non-rendered
  secondary nav.
* At <=996px: pin --ifm-navbar-padding-horizontal and
  --ifm-spacing-horizontal both to 20px so the hamburger icon and
  the breadcrumb home icon share a single left edge.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/css/custom.css                 | 12 +++++++
 src/theme/Footer/styles.module.css | 57 +++++++++++++++++++-----------
 2 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 8ad12c49aa..96eef4537b 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -381,6 +381,18 @@ html {
   align-self: flex-start;
 }
 
+/* On narrow widths the secondary nav is replaced by the hamburger
+   menu, so its 48px shouldn't be reserved as empty space above the
+   breadcrumbs. Also align hamburger and article column to a shared
+   20px left edge so they line up visually. */
+@media (max-width: 996px) {
+  :root {
+    --ifm-secondary-nav-height: 0px;
+    --ifm-navbar-padding-horizontal: 20px;
+    --ifm-spacing-horizontal: 20px;
+  }
+}
+
 
 /* Fix sidebar border to not extend behind navbar */
 @media (min-width: 997px) {
diff --git a/src/theme/Footer/styles.module.css b/src/theme/Footer/styles.module.css
index 9934e7c63e..30e57d43e8 100644
--- a/src/theme/Footer/styles.module.css
+++ b/src/theme/Footer/styles.module.css
@@ -8,17 +8,17 @@
   -webkit-backdrop-filter: blur(12px);
 }
 
-/* Sticky to viewport bottom only on top-level category index pages */
-:global(body:has([class*='topLevelCategory'])) .footer {
-  position: sticky;
-  bottom: 0;
-  z-index: 50;
-}
+/* Footer flows as the last block element in the page — no
+   sticky/overlay so content scrolls under it instead of behind it. */
 
-/* On desktop docs pages, scope the footer to the main content column only */
+/* On desktop docs pages, scope the footer to the main content column.
+   The 1px left border continues the sidebar's right-edge divider line
+   down through the footer so the vertical rule doesn't break at the
+   article/footer boundary. */
 @media (min-width: 997px) {
   :global(html.docs-wrapper) .footer {
-    margin-left: 307px;
+    margin-left: 306px;
+    border-left: 1px solid var(--ifm-section-divider-color);
   }
 }
 
@@ -46,21 +46,29 @@
   pointer-events: none;
 }
 
+/* Full-width container so it left-aligns with the article column at
+   every viewport — matches the alignment of the page-nav links above
+   ("← Previous", "Next →"). The article column has its own
+   --ifm-spacing-horizontal padding; we mirror it here. */
 .container {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 2rem;
-  width: 83%;
-  margin: 0 auto;
-  padding: 0 var(--neo-spacing_3_1_4);
-  transform: translateX(-120px);
+  gap: 1.25rem 2rem;
+  width: 100%;
+  margin: 0;
+  padding: 0 var(--ifm-spacing-horizontal, 1.5rem);
 }
 
-@media (max-width: 996px) {
-  .container {
-    transform: none;
-  }
+.links {
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+
+.links a,
+.links span {
+  white-space: nowrap;
 }
 
 .social {
@@ -133,14 +141,23 @@
   pointer-events: none;
 }
 
+/* Stage 2 (medium): when the row gets too narrow to fit links + button
+   + socials inline, .actions wraps to a second line automatically via
+   .container's flex-wrap: wrap. No media query needed here — flexbox
+   handles it as soon as content doesn't fit.
+
+   Stage 3 (narrow): full vertical stack. */
 @media (max-width: 768px) {
   .container {
     flex-direction: column;
-    gap: 1.5rem;
+    align-items: flex-start;
+    gap: 1.25rem;
   }
 
   .links {
-    flex-wrap: wrap;
-    justify-content: center;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-wrap: nowrap;
+    gap: 0.5rem;
   }
 }