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

[Glitch] Fix navigation overflow issue in advanced UI

Browse Source 
Port 5f998507ece25be175ceb06e3729c411f3c0f37c to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion 2026-05-27 11:38:18 +02:00 committed by Claire
parent 83e77e88ae
commit daf498a743
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/flavours/glitch/features/getting_started/index.tsx
View File

@ -4,16 +4,14 @@ import { Helmet } from '@unhead/react/helmet';
import { Column } from 'flavours/glitch/components/column'; import { Column } from 'flavours/glitch/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/flavours/glitch/features/navigation_panel/index.tsx
View File

@ -65,7 +65,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',
@ -270,7 +270,10 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
); );
return ( return (
<div className='navigation-panel'> <nav
className='navigation-panel'
aria-label={intl.formatMessage(messages.main)}
>
{showSearch && <Search singleColumn />} {showSearch && <Search singleColumn />}
{!multiColumn && <ProfileCard />} {!multiColumn && <ProfileCard />}
@ -456,12 +459,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');
@ -570,8 +572,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 },
@ -585,6 +586,6 @@ export const CollapsibleNavigationPanel: React.FC = () => {
> >
<NavigationPanel /> <NavigationPanel />
</animated.div> </animated.div>
</nav> </div>
); );
}; };