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