gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-09-06 09:51:24 +00:00
Code Issues Actions 24 Packages Projects Releases Wiki Activity

fix: Prevent mobile navbar from overscrolling (#35074)

Browse Source
This commit is contained in:
diondiondion 2025-06-18 13:55:16 +02:00 committed by GitHub
parent b1fe35d7d2
commit 102a7635d6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/styles/mastodon/_variables.scss
View File

@ -96,6 +96,7 @@ $media-modal-media-max-width: 100%;
$media-modal-media-max-height: 80%; $media-modal-media-max-height: 80%;
$no-gap-breakpoint: 1175px; $no-gap-breakpoint: 1175px;
$mobile-menu-breakpoint: 760px;
$mobile-breakpoint: 630px; $mobile-breakpoint: 630px;
$no-columns-breakpoint: 600px; $no-columns-breakpoint: 600px;

18
app/javascript/styles/mastodon/components.scss
View File

@ -2863,17 +2863,18 @@ a.account__display-name {
} }
.ui__navigation-bar { .ui__navigation-bar {
position: sticky; position: fixed;
bottom: 0; bottom: 0;
background: var(--background-color);
backdrop-filter: var(--background-filter);
border-top: 1px solid var(--background-border-color);
z-index: 3; z-index: 3;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%;
gap: 8px; gap: 8px;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
background: var(--background-color);
backdrop-filter: var(--background-filter);
border-top: 1px solid var(--background-border-color);
.layout-multiple-columns & { .layout-multiple-columns & {
display: none; display: none;
@ -2984,11 +2985,20 @@ a.account__display-name {
} }
.ui { .ui {
--mobile-bottom-nav-height: 55px;
--last-content-item-border-width: 2px;
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
@media (max-width: #{$mobile-menu-breakpoint - 1}) {
padding-bottom: calc(
var(--mobile-bottom-nav-height) - var(--last-content-item-border-width)
);
}
} }
.drawer { .drawer {