From 7ca882879b23435482d81af95b295044999f316e Mon Sep 17 00:00:00 2001 From: matteoscrugli Date: Tue, 23 Dec 2025 22:59:37 +0100 Subject: [PATCH] Fix bottom tab bar padding for mobile and SwipeTabs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- frontend/src/styles/Layout.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/frontend/src/styles/Layout.css b/frontend/src/styles/Layout.css index 26422f8..34ec36d 100644 --- a/frontend/src/styles/Layout.css +++ b/frontend/src/styles/Layout.css @@ -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) +