From 8b66f0f6cde3fd4710ca1005be0ee5d8fc242f1c Mon Sep 17 00:00:00 2001
From: polybjorn <service@polybjorn.com>
Date: Thu, 30 Apr 2026 06:14:02 +0000
Subject: [PATCH] fix(themes): keep sidebar toggle inline in Alternative-Dark
 and Flat (#8736)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In Alternative-Dark and Flat (and Dark-pink via its `../Alternative-Dark/adark.css` import), the sidebar toggle button (`#nav_menu_toggle_aside`) overlaps the next button.

Base-theme positions the toggle absolutely (`position: absolute; left: 0.5rem`) and reserves space for it via `.nav_menu { padding-left: 3rem }`. Each affected theme overrides `.nav_menu` with `padding: 5px 0`, explicitly setting no horizontal padding. With no reserved space and the toggle still absolute, the toggle floats over the start of `#nav_menu_actions`.

The fix sets `#nav_menu_toggle_aside { position: static }` per theme, so the toggle flows inline at the start of `.nav_menu` alongside the action buttons. This respects each theme's stated layout choice (no horizontal padding) rather than overriding it to restore base's reservation. The same `position: static` approach was previously approved for Nord in #8711.

Themes that explicitly reserve horizontal space (Ansum, Mapco, Pafat) or preserve base's reservation (Dark, Origine, Origine-compact) are unaffected. Dark-pink needs no changes of its own; it inherits the fix via Alt-Dark.

### Screenshot

#### Bug, wide width: toggle overlapping next button
<img width="62" height="47" alt="alt-dark overlap before fix" src="https://github.com/user-attachments/assets/ae33a9c1-5abb-40d4-b17d-9288c355a86c" />


### Notes

- `.rtl.css` regenerated via `make rtl`.
- `npm run stylelint` passes.
- Verified on Alternative-Dark, Dark-pink, Flat.

Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
---
 p/themes/Alternative-Dark/adark.css     | 4 ++++
 p/themes/Alternative-Dark/adark.rtl.css | 4 ++++
 p/themes/Flat/flat.css                  | 4 ++++
 p/themes/Flat/flat.rtl.css              | 4 ++++
 4 files changed, 16 insertions(+)

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index f81a2e533..98679f8f9 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -744,6 +744,10 @@ kbd {
 	text-align: center;
 }
 
+.nav_menu #nav_menu_toggle_aside {
+	position: static;
+}
+
 /*=== Feed articles */
 .flux {
 	background: var(--background-color-dark);
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 1ef745e66..efbacf146 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -744,6 +744,10 @@ kbd {
 	text-align: center;
 }
 
+.nav_menu #nav_menu_toggle_aside {
+	position: static;
+}
+
 /*=== Feed articles */
 .flux {
 	background: var(--background-color-dark);
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index ba2442fb8..2f6c3d233 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -678,6 +678,10 @@ th {
 	padding: 5px 0;
 }
 
+.nav_menu #nav_menu_toggle_aside {
+	position: static;
+}
+
 .dropdown-menu .dropdown-header .icon {
 	filter: invert(0.6);
 }
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index a32517a6d..a3bc43064 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -678,6 +678,10 @@ th {
 	padding: 5px 0;
 }
 
+.nav_menu #nav_menu_toggle_aside {
+	position: static;
+}
+
 .dropdown-menu .dropdown-header .icon {
 	filter: invert(0.6);
 }