tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix navigation overflow issue in advanced UI (#39178)

Browse Source
This commit is contained in:
diondiondion 2026-05-27 11:38:18 +02:00 committed by GitHub
parent 991a8af7a0
commit 5f998507ec
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/mastodon/features/getting_started/index.tsx
View File

@ -4,16 +4,14 @@ import { Helmet } from '@unhead/react/helmet';
import { Column } from 'mastodon/components/column'; import { Column } from 'mastodon/components/column';
import { NavigationPanel, messages } from '../navigation_panel'; import { NavigationPanel } from '../navigation_panel';
import { LinkFooter } from '../ui/components/link_footer'; import { LinkFooter } from '../ui/components/link_footer';
const GettingStarted: React.FC = () => { const GettingStarted: React.FC = () => {
const intl = useIntl(); const intl = useIntl();
return ( return (
<Column> <Column>
<nav aria-label={intl.formatMessage(messages.main)}> <NavigationPanel multiColumn />
<NavigationPanel multiColumn />
</nav>
<LinkFooter context='multi-column' /> <LinkFooter context='multi-column' />

15
app/javascript/mastodon/features/navigation_panel/index.tsx
View File

@ -60,7 +60,7 @@ import { MoreLink } from './components/more_link';
import { SignInBanner } from './components/sign_in_banner'; import { SignInBanner } from './components/sign_in_banner';
import { Trends } from './components/trends'; import { Trends } from './components/trends';
export const messages = defineMessages({ const messages = defineMessages({
home: { id: 'tabs_bar.home', defaultMessage: 'Home' }, home: { id: 'tabs_bar.home', defaultMessage: 'Home' },
notifications: { notifications: {
id: 'tabs_bar.notifications', id: 'tabs_bar.notifications',
@ -238,7 +238,10 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
} }
return ( return (
<div className='navigation-panel'> <nav
className='navigation-panel'
aria-label={intl.formatMessage(messages.main)}
>
<div className='navigation-panel__logo'> <div className='navigation-panel__logo'>
<Link <Link
to='/' to='/'
@ -420,12 +423,11 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
<div className='flex-spacer' /> <div className='flex-spacer' />
<Trends /> <Trends />
</div> </nav>
); );
}; };
export const CollapsibleNavigationPanel: React.FC = () => { export const CollapsibleNavigationPanel: React.FC = () => {
const intl = useIntl();
const open = useAppSelector((state) => state.navigation.open); const open = useAppSelector((state) => state.navigation.open);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const openable = useBreakpoint('openable'); const openable = useBreakpoint('openable');
@ -534,8 +536,7 @@ export const CollapsibleNavigationPanel: React.FC = () => {
const showOverlay = openable && open; const showOverlay = openable && open;
return ( return (
<nav <div
aria-label={intl.formatMessage(messages.main)}
className={classNames( className={classNames(
'columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational', 'columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational',
{ 'columns-area__panels__pane--overlay': showOverlay }, { 'columns-area__panels__pane--overlay': showOverlay },
@ -549,6 +550,6 @@ export const CollapsibleNavigationPanel: React.FC = () => {
> >
<NavigationPanel /> <NavigationPanel />
</animated.div> </animated.div>
</nav> </div>
); );
}; };