From 5f998507ece25be175ceb06e3729c411f3c0f37c Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Wed, 27 May 2026 11:38:18 +0200
Subject: [PATCH] Fix navigation overflow issue in advanced UI (#39178)

---
 .../mastodon/features/getting_started/index.tsx   |  6 ++----
 .../mastodon/features/navigation_panel/index.tsx  | 15 ++++++++-------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/app/javascript/mastodon/features/getting_started/index.tsx b/app/javascript/mastodon/features/getting_started/index.tsx
index 5497b2de89..84c786fa06 100644
--- a/app/javascript/mastodon/features/getting_started/index.tsx
+++ b/app/javascript/mastodon/features/getting_started/index.tsx
@@ -4,16 +4,14 @@ import { Helmet } from '@unhead/react/helmet';
 
 import { Column } from 'mastodon/components/column';
 
-import { NavigationPanel, messages } from '../navigation_panel';
+import { NavigationPanel } from '../navigation_panel';
 import { LinkFooter } from '../ui/components/link_footer';
 
 const GettingStarted: React.FC = () => {
   const intl = useIntl();
   return (
     <Column>
-      <nav aria-label={intl.formatMessage(messages.main)}>
-        <NavigationPanel multiColumn />
-      </nav>
+      <NavigationPanel multiColumn />
 
       <LinkFooter context='multi-column' />
 
diff --git a/app/javascript/mastodon/features/navigation_panel/index.tsx b/app/javascript/mastodon/features/navigation_panel/index.tsx
index 9ac2ee461e..a734cb882b 100644
--- a/app/javascript/mastodon/features/navigation_panel/index.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/index.tsx
@@ -60,7 +60,7 @@ import { MoreLink } from './components/more_link';
 import { SignInBanner } from './components/sign_in_banner';
 import { Trends } from './components/trends';
 
-export const messages = defineMessages({
+const messages = defineMessages({
   home: { id: 'tabs_bar.home', defaultMessage: 'Home' },
   notifications: {
     id: 'tabs_bar.notifications',
@@ -238,7 +238,10 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
   }
 
   return (
-    <div className='navigation-panel'>
+    <nav
+      className='navigation-panel'
+      aria-label={intl.formatMessage(messages.main)}
+    >
       <div className='navigation-panel__logo'>
         <Link
           to='/'
@@ -420,12 +423,11 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
       <div className='flex-spacer' />
 
       <Trends />
-    </div>
+    </nav>
   );
 };
 
 export const CollapsibleNavigationPanel: React.FC = () => {
-  const intl = useIntl();
   const open = useAppSelector((state) => state.navigation.open);
   const dispatch = useAppDispatch();
   const openable = useBreakpoint('openable');
@@ -534,8 +536,7 @@ export const CollapsibleNavigationPanel: React.FC = () => {
   const showOverlay = openable && open;
 
   return (
-    <nav
-      aria-label={intl.formatMessage(messages.main)}
+    <div
       className={classNames(
         'columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational',
         { 'columns-area__panels__pane--overlay': showOverlay },
@@ -549,6 +550,6 @@ export const CollapsibleNavigationPanel: React.FC = () => {
       >
         <NavigationPanel />
       </animated.div>
-    </nav>
+    </div>
   );
 };