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 { 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' />

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 { 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>
);
};