techhub/mastodon
2
0
Fork 0
Code 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
2 changed files with 15 additions and 4 deletions
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%;
$no-gap-breakpoint: 1175px;
$mobile-menu-breakpoint: 760px;
$mobile-breakpoint: 630px;
$no-columns-breakpoint: 600px;

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

@@ -2863,17 +2863,18 @@ a.account__display-name {
}
.ui__navigation-bar {
position: sticky;
position: fixed;
bottom: 0;
background: var(--background-color);
backdrop-filter: var(--background-filter);
border-top: 1px solid var(--background-border-color);
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 8px;
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 & {
display: none;
@@ -2984,11 +2985,20 @@ a.account__display-name {
}
.ui {
--mobile-bottom-nav-height: 55px;
--last-content-item-border-width: 2px;
flex: 0 0 auto;
display: flex;
flex-direction: column;
width: 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 {