Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-07-19 01:17:31 +00:00
Code Issues Projects Releases Wiki Activity

build: halve safe-area-inset-bottom padding for mobile bottom nav

Browse source 
Reduce bottom safe area from full to half inset for bottom nav height,
padding, and snackbar margin to avoid excessive spacing on iOS.
This commit is contained in:
johannesjo 2026-02-10 18:39:41 +01:00
parent 60d4b02704
commit c115c46b53
2 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.scss
View file

@ -9,7 +9,7 @@
bottom: 0;
left: 0;
right: 0;
height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) / 2);
box-sizing: border-box;
background: var(--bottom-nav-bg);
border-top: 1px solid var(--separator-color);
@ -17,7 +17,7 @@
align-items: center;
justify-content: space-between;
padding: 0 8px;
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
z-index: var(--z-mobile-bottom-nav);
display: flex;
@ -107,7 +107,7 @@
// iOS: nav extends its background into the home indicator area,
// padding keeps buttons above it
:host-context(.isIOS) .mobile-bottom-nav {
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
// Material Design touch target improvements

4
src/styles/components/_overwrite-material.scss
View file

@ -346,14 +346,14 @@ mat-tooltip-component {
}
body.hasMobileBottomNav mat-snack-bar-container {
margin-bottom: calc(
var(--bottom-nav-height) + env(safe-area-inset-bottom) + 24px
var(--bottom-nav-height) + env(safe-area-inset-bottom) / 2 + 24px
) !important;
pointer-events: auto;
transition: 150ms margin;
}
body.hasMobileBottomNav.isAddTaskBarOpen mat-snack-bar-container {
margin-bottom: calc(
var(--bottom-nav-height) + env(safe-area-inset-bottom) + 48px
var(--bottom-nav-height) + env(safe-area-inset-bottom) / 2 + 48px
) !important;
pointer-events: auto;
}