From d9c494c3f1d1ca6542b4c4d2e9730183c844ce7e Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Mon, 31 Aug 2026 15:15:00 +0530
Subject: [PATCH] fix: stack sidebar footer as a row in production builds
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The default theme's sidebar footer sets its row layout in a CSS module,
but Apsara's `Sidebar.Footer` renders a `Flex` with `direction='column'`.
Both are single-class selectors with equal specificity, so the winner is
decided by stylesheet order.

Vite injects each CSS module as its own style tag in dev, where the
theme's module lands after Apsara's and wins. The production bundle
concatenates everything in chunk-graph order, which puts Apsara's flex
utilities after the theme module — so the tie flips and the footer
renders as a column. The version switcher and links menu ended up on
separate lines, only in built sites.

Set the layout through `Sidebar.Footer`'s Flex props instead. Apsara
spreads `...props` after its own `direction`, so the correct utility
classes are emitted and there is no cascade to lose. The overridden
declarations are dropped from the CSS module, leaving it the styling
Apsara does not set.

Also give the mobile menu's static version label the same metrics as a
sidebar item. With no `versions` configured, `VersionSwitcher` renders
`latest.label` as a bare span, which read as loose text beneath the
full-width link rows.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../src/themes/default/Layout.module.css      | 29 +++++++++++++++----
 .../chronicle/src/themes/default/Layout.tsx   |  7 ++++-
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/packages/chronicle/src/themes/default/Layout.module.css b/packages/chronicle/src/themes/default/Layout.module.css
index 66f7856..f68f3a0 100644
--- a/packages/chronicle/src/themes/default/Layout.module.css
+++ b/packages/chronicle/src/themes/default/Layout.module.css
@@ -101,13 +101,11 @@
   color: var(--rs-color-foreground-base-primary);
 }
 
-/* Apsara's Sidebar.Footer is a column Flex — force a row so the version
-   switcher and links menu sit at opposite ends. */
+/* Row layout (direction/align/justify) is set via Sidebar.Footer's Flex props,
+   not here. Apsara's utility classes and this module have equal specificity, so
+   overriding from CSS would depend on stylesheet order — which differs between
+   dev and the production bundle, and silently loses in prod. */
 .sidebarFooter {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
   gap: var(--rs-space-3);
   height: var(--navbar-height);
   box-sizing: border-box;
@@ -345,6 +343,25 @@
   border-top: 0.5px solid var(--rs-color-border-base-primary);
 }
 
+/* With no `versions` configured, VersionSwitcher renders `latest.label` as a
+   bare <span>. Left as-is it reads as loose text under the full-width link
+   rows, so match Sidebar.Item's metrics and make it a proper footer row. The
+   versioned case renders a <button> and keeps Apsara's Button styling.
+
+   Scoped from the parent rather than inside VersionSwitcher so the desktop
+   footer keeps its inline treatment. The element+class selector also outranks
+   Apsara's single-class rules, so this does not depend on stylesheet order. */
+.mobileMenuFooter > span {
+  display: flex;
+  box-sizing: border-box;
+  align-self: stretch;
+  align-items: center;
+  min-height: var(--rs-space-9);
+  padding: var(--rs-space-3);
+  border-radius: var(--rs-radius-2);
+  color: var(--rs-color-foreground-base-secondary);
+}
+
 .mobileNav {
   display: none;
 }
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index a9213bc..99be987 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -260,7 +260,12 @@ export function Layout({
               ))}
             </Sidebar.Main>
             {showFooter ? (
-              <Sidebar.Footer className={styles.sidebarFooter}>
+              <Sidebar.Footer
+                className={styles.sidebarFooter}
+                direction='row'
+                align='center'
+                justify='between'
+              >
                 <VersionSwitcher />
                 <SidebarLinks />
               </Sidebar.Footer>