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

Fix page content padding consistency

Browse Source 
- Restore bottom padding for .page-content and .admin-tab-content
  across all breakpoints (was accidentally set to 0)
- Change bottom tab bar padding from max() to calc(padding + bar-height)
  so content has both regular margin AND space for fixed tab bar

🤖 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:54:22 +01:00
parent 98fc8330f4
commit ec726da797
3 changed files with 97 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,31 +29,12 @@
/* ========== PAGE STRUCTURE ========== */
/* Page header container - fixed at top */
/* Page header container */
.page-tabs-container,
.admin-tabs-container {
display: flex;
justify-content: center;
padding: 0.75rem;
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 0;
z-index: 100;
}
/* Handle collapsed sidebar for fixed header (desktop only) */
@media (min-width: 769px) {
[data-sidebar-collapsed='true'] .page-tabs-container,
[data-sidebar-collapsed='true'] .admin-tabs-container {
left: var(--sidebar-width-collapsed);
}
}
/* Add top padding to content to account for fixed header */
.page-content,
.admin-tab-swipe {
padding-top: calc(var(--page-padding-y) + 60px);
}
/* Ensure no extra margin from body */
@@ -394,7 +375,7 @@ label,
/* Main content wrapper - with symmetric padding from sidebar edge to window edge */
.page-content {
padding: var(--page-padding-y) var(--page-padding-x) 0;
padding: var(--page-padding-y) var(--page-padding-x);
width: 100%;
max-width: var(--page-max-width);
margin: 0 auto;
@@ -409,7 +390,7 @@ label,
/* Admin tab content (for tabbed interfaces) */
.admin-tab-content {
padding: var(--page-padding-y) var(--page-padding-x) 0;
padding: var(--page-padding-y) var(--page-padding-x);
max-width: var(--page-max-width);
margin: 0 auto;
width: 100%;
@@ -445,13 +426,8 @@ label,
padding: var(--page-padding-y-tablet) var(--page-padding-x-tablet);
}
.page-content,
.admin-tab-swipe {
padding-top: calc(var(--page-padding-y-tablet) + 60px);
}
.admin-tab-content {
padding: var(--page-padding-y-tablet) var(--page-padding-x-tablet) 0;
padding: var(--page-padding-y-tablet) var(--page-padding-x-tablet);
}
}
@@ -495,12 +471,6 @@ label,
.page-tabs-container,
.admin-tabs-container {
padding: 0.75rem;
left: 0;
}
.page-content,
.admin-tab-swipe {
padding-top: calc(var(--page-padding-y-mobile) + 60px);
}
.page-tabs-slider,
@@ -620,11 +590,11 @@ label,
}
.page-content {
padding: var(--page-padding-y-mobile) var(--page-padding-x-mobile) 0;
padding: var(--page-padding-y-mobile) var(--page-padding-x-mobile);
}
.admin-tab-content {
padding: var(--page-padding-y-mobile) var(--page-padding-x-mobile) 0;
padding: var(--page-padding-y-mobile) var(--page-padding-x-mobile);
}
}
@@ -637,11 +607,11 @@ label,
}
.page-content {
padding: var(--page-padding-y-mobile) var(--page-padding-x-mobile) 0;
padding: var(--page-padding-y-mobile) var(--page-padding-x-mobile);
}
.admin-tab-content {
padding: var(--page-padding-y-mobile) var(--page-padding-x-mobile) 0;
padding: var(--page-padding-y-mobile) var(--page-padding-x-mobile);
}
}
@@ -859,8 +829,8 @@ label,
/* Bottom position - fixed at bottom (global setting for all pages) */
/* Note: Primary positioning is handled by TabsScroller component with inline styles.
These CSS rules serve as fallback/additional styling. */
[data-tab-position='bottom'] .page-tabs-container,
[data-tab-position='bottom'] .admin-tabs-container {
[data-tab-position='bottom'] .page-tabs-container[data-has-tabs='true'],
[data-tab-position='bottom'] .admin-tabs-container[data-has-tabs='true'] {
position: fixed;
top: auto;
bottom: 0;
@@ -872,54 +842,62 @@ label,
}
/* Handle collapsed sidebar */
[data-tab-position='bottom'][data-sidebar-collapsed='true'] .page-tabs-container,
[data-tab-position='bottom'][data-sidebar-collapsed='true'] .admin-tabs-container {
[data-tab-position='bottom'][data-sidebar-collapsed='true'] .page-tabs-container[data-has-tabs='true'],
[data-tab-position='bottom'][data-sidebar-collapsed='true'] .admin-tabs-container[data-has-tabs='true'] {
left: var(--sidebar-width-collapsed);
}
/* Adjust slider styling for bottom position */
[data-tab-position='bottom'] .page-tabs-slider,
[data-tab-position='bottom'] .admin-tabs-slider {
[data-tab-position='bottom'] .page-tabs-slider[data-has-tabs='true'],
[data-tab-position='bottom'] .admin-tabs-slider[data-has-tabs='true'] {
width: 100%;
justify-content: flex-start;
}
/* Add bottom padding and remove top padding when bar is at bottom */
[data-tab-position='bottom'] .main-content {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] {
padding-bottom: 0;
}
[data-tab-position='bottom'] .page-content,
[data-tab-position='bottom'] .admin-tab-swipe {
[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);
}
[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 {
padding-bottom: calc(
var(--page-padding-y) +
var(--tabs-bar-height, calc(72px + env(safe-area-inset-bottom, 0px)))
);
}
/* Mobile: full width at bottom */
@media (max-width: 768px) {
[data-tab-position='bottom'] .page-tabs-container,
[data-tab-position='bottom'] .admin-tabs-container {
[data-tab-position='bottom'] .page-tabs-container[data-has-tabs='true'],
[data-tab-position='bottom'] .admin-tabs-container[data-has-tabs='true'] {
left: 0;
}
/* Override collapsed state on mobile */
[data-tab-position='bottom'][data-sidebar-collapsed='true'] .page-tabs-container,
[data-tab-position='bottom'][data-sidebar-collapsed='true'] .admin-tabs-container {
[data-tab-position='bottom'][data-sidebar-collapsed='true'] .page-tabs-container[data-has-tabs='true'],
[data-tab-position='bottom'][data-sidebar-collapsed='true'] .admin-tabs-container[data-has-tabs='true'] {
left: 0;
}
/* Hide divider on mobile when bar is at bottom */
[data-tab-position='bottom'] .page-tabs-slider .page-tabs-divider,
[data-tab-position='bottom'] .page-tabs-slider .admin-tabs-divider,
[data-tab-position='bottom'] .admin-tabs-slider .page-tabs-divider,
[data-tab-position='bottom'] .admin-tabs-slider .admin-tabs-divider {
[data-tab-position='bottom'] .page-tabs-slider[data-has-tabs='true'] .page-tabs-divider,
[data-tab-position='bottom'] .page-tabs-slider[data-has-tabs='true'] .admin-tabs-divider,
[data-tab-position='bottom'] .admin-tabs-slider[data-has-tabs='true'] .page-tabs-divider,
[data-tab-position='bottom'] .admin-tabs-slider[data-has-tabs='true'] .admin-tabs-divider {
display: none;
}
}
/* Responsive position - top on desktop, bottom on mobile */
@media (max-width: 768px) {
[data-tab-position='responsive'] .page-tabs-container,
[data-tab-position='responsive'] .admin-tabs-container {
[data-tab-position='responsive'] .page-tabs-container[data-has-tabs='true'],
[data-tab-position='responsive'] .admin-tabs-container[data-has-tabs='true'] {
position: fixed;
top: auto;
bottom: 0;
@@ -930,8 +908,8 @@ label,
padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
}
[data-tab-position='responsive'] .page-tabs-slider,
[data-tab-position='responsive'] .admin-tabs-slider {
[data-tab-position='responsive'] .page-tabs-slider[data-has-tabs='true'],
[data-tab-position='responsive'] .admin-tabs-slider[data-has-tabs='true'] {
width: 100%;
justify-content: flex-start;
/* padding-left: 72px inherited from mobile rules for menu button spacing */
@@ -946,20 +924,28 @@ label,
}
/* Hide divider when bar is at bottom */
[data-tab-position='responsive'] .page-tabs-slider .page-tabs-divider,
[data-tab-position='responsive'] .page-tabs-slider .admin-tabs-divider,
[data-tab-position='responsive'] .admin-tabs-slider .page-tabs-divider,
[data-tab-position='responsive'] .admin-tabs-slider .admin-tabs-divider {
[data-tab-position='responsive'] .page-tabs-slider[data-has-tabs='true'] .page-tabs-divider,
[data-tab-position='responsive'] .page-tabs-slider[data-has-tabs='true'] .admin-tabs-divider,
[data-tab-position='responsive'] .admin-tabs-slider[data-has-tabs='true'] .page-tabs-divider,
[data-tab-position='responsive'] .admin-tabs-slider[data-has-tabs='true'] .admin-tabs-divider {
display: none;
}
/* Add bottom padding and remove top padding */
[data-tab-position='responsive'] .main-content {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] {
padding-bottom: 0;
}
[data-tab-position='responsive'] .page-content,
[data-tab-position='responsive'] .admin-tab-swipe {
[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 {
padding-top: var(--page-padding-y-mobile);
}
[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 {
padding-bottom: calc(
var(--page-padding-y-mobile) +
var(--tabs-bar-height, calc(72px + env(safe-area-inset-bottom, 0px)))
);
}
}