matteoscrugli/app-service
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify mobile bottom padding to match desktop spacing

Browse Source 
Use fixed 24px padding for mobile bottom tab bar instead of complex
variable calculations. This provides consistent spacing that matches
the desktop visual appearance.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
matteoscrugli
2026-01-11 15:08:27 +01:00
parent 44462ca295
commit 9c15d1dec5
1 changed files with 3 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/styles/Layout.css
View File

@@ -445,7 +445,7 @@ label,
.main-content { .main-content {
margin-left: 0; margin-left: 0;
--page-padding-y-mobile-gap: var(--space-3); --page-padding-y-mobile-gap: var(--space-3);
--page-padding-y-mobile-bottom-gap: var(--space-3); --page-padding-y-mobile-bottom-gap: 0;
--tabs-slider-height-fallback: calc(var(--tab-pill-height, 44px) + 8px); --tabs-slider-height-fallback: calc(var(--tab-pill-height, 44px) + 8px);
} }
@@ -929,11 +929,7 @@ label,
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content, [data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content,
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-content { [data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-content {
padding-bottom: calc( padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
var(--page-padding-y-mobile-bottom-gap, 0px) +
var(--tabs-slider-height, var(--tabs-slider-height-fallback, 52px)) +
env(safe-area-inset-bottom, 0px)
);
} }
} }
@@ -970,10 +966,6 @@ label,
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .page-content, [data-tab-position='responsive'] .main-content[data-has-tabs='true'] .page-content,
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .admin-tab-content { [data-tab-position='responsive'] .main-content[data-has-tabs='true'] .admin-tab-content {
padding-bottom: calc( padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
var(--page-padding-y-mobile-bottom-gap, 0px) +
var(--tabs-slider-height, var(--tabs-slider-height-fallback, 52px)) +
env(safe-area-inset-bottom, 0px)
);
} }
} }