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

Fix bottom tab bar padding for mobile and SwipeTabs

Browse Source 
- Add .admin-tab-swipe to padding-bottom rules for bottom position
- Add mobile-specific padding rules for data-tab-position='bottom'
- Update responsive position rules to include .admin-tab-swipe

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
matteoscrugli
2025-12-23 22:59:37 +01:00
parent ec726da797
commit 7ca882879b
1 changed files with 17 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -865,6 +865,7 @@ label,
}
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content,
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-swipe,
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-content {
padding-bottom: calc(
var(--page-padding-y) +
@@ -892,6 +893,21 @@ label,
[data-tab-position='bottom'] .admin-tabs-slider[data-has-tabs='true'] .admin-tabs-divider {
display: none;
}
/* Mobile padding for bottom position */
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content,
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-swipe {
padding-top: var(--page-padding-y-mobile);
}
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content,
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-swipe,
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-content {
padding-bottom: calc(
var(--page-padding-y-mobile) +
var(--tabs-bar-height, calc(72px + env(safe-area-inset-bottom, 0px)))
);
}
}
/* Responsive position - top on desktop, bottom on mobile */
@@ -942,6 +958,7 @@ label,
}
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .page-content,
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .admin-tab-swipe,
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .admin-tab-content {
padding-bottom: calc(
var(--page-padding-y-mobile) +