From 6b17da988c3bb7a500f3659f20d33af021bc5785 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Wed, 2 Sep 2026 09:11:03 +0000
Subject: [PATCH] Redesign: Fix mobile navigation background colour (#40354)

---
 .../navigation_panel/redesign/header.module.scss       |  4 ++--
 .../features/navigation_panel/redesign/index.tsx       |  8 +++++---
 .../features/navigation_panel/redesign/mobile_nav.tsx  |  2 +-
 .../redesign/navigation_link.module.scss               |  2 +-
 .../navigation_panel/redesign/styles.module.scss       | 10 ++++++++--
 5 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss
index e3dc7b3a1d9..4ab3d0b1d50 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss
@@ -13,10 +13,10 @@
 
   padding: var(--space-xl) var(--space-lg) var(--half-bottom-spacing);
   margin-bottom: var(--half-bottom-spacing);
-  background: var(--color-bg-blend);
+  background: var(--navigation-background-color);
 
   &::after {
-    @include mixins.scroll-gradient(top, var(--color-bg-blend));
+    @include mixins.scroll-gradient(top, var(--navigation-background-color));
 
     opacity: 0;
     transition: opacity ease 250ms;
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx
index ba53f21df3f..86ba83c8047 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx
@@ -70,9 +70,10 @@ function useFollowedHashtags() {
   return { followedHashtags: tags };
 }
 
-export const RedesignNavigationPanel: React.FC<{ siteName?: string }> = ({
-  siteName,
-}) => {
+export const RedesignNavigationPanel: React.FC<{
+  siteName?: string;
+  mode?: 'static' | 'slide-out';
+}> = ({ siteName, mode = 'static' }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const { signedIn } = useIdentity();
@@ -101,6 +102,7 @@ export const RedesignNavigationPanel: React.FC<{ siteName?: string }> = ({
   return (
     <nav
       className={classes.root}
+      data-mode={mode}
       aria-label={intl.formatMessage(messages.main)}
     >
       {topSensor}
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx
index fed7ddf63be..868e5464cfa 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx
@@ -216,7 +216,7 @@ const SlideOutNavigation: React.FC = () => {
       ref={overlayRef}
     >
       <animated.div className={classes.slideOut} {...bind()} style={{ x }}>
-        <RedesignNavigationPanel />
+        <RedesignNavigationPanel mode='slide-out' />
       </animated.div>
     </div>
   );
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss
index 15f65d84bc6..a51fcff118c 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss
@@ -35,7 +35,7 @@
   }
 
   @media (width < variables.$mobile-menu-breakpoint) {
-    min-height: 40px;
+    min-height: 48px;
   }
 
   &:hover,
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss
index 04bf7d305ab..f2ba64c11fc 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss
@@ -15,6 +15,12 @@
   --footer-height: 200px;
 
   scroll-padding-block: var(--header-height) var(--footer-height);
+
+  --navigation-background-color: var(--color-bg-blend);
+
+  &[data-mode='slide-out'] {
+    --navigation-background-color: var(--color-bg-primary);
+  }
 }
 
 .list {
@@ -28,10 +34,10 @@
   margin-top: auto;
   padding: var(--space-xl);
   padding-top: var(--space-2xs);
-  background-color: var(--color-bg-blend);
+  background-color: var(--navigation-background-color);
 
   &::before {
-    @include mixins.scroll-gradient(bottom, var(--color-bg-blend));
+    @include mixins.scroll-gradient(bottom, var(--navigation-background-color));
 
     opacity: 0;
     transition: opacity ease 250ms;