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

Use fixed position for tab bar (top and bottom)

Browse Source 
- Change tab bar to position: fixed for both top and bottom positions
- Add padding-top to main-content to account for fixed top bar
- Handle sidebar collapsed state and mobile for left positioning
- Remove padding-top when bar is at bottom position

🤖 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 23:42:11 +01:00
parent 61b0e7833d
commit 77980828f5
1 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,9 +20,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: margin-left 0.3s ease; transition: margin-left 0.3s ease;
overflow-y: auto; padding-top: var(--tabs-bar-height, 72px);
height: 100vh;
height: 100dvh;
} }
/* Adjust main content when sidebar is collapsed */ /* Adjust main content when sidebar is collapsed */
@@ -38,12 +36,20 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 0.75rem; padding: 0.75rem;
position: sticky; position: fixed;
top: 0; top: 0;
left: var(--sidebar-width);
right: 0;
z-index: 100; z-index: 100;
background: var(--color-bg-main); background: var(--color-bg-main);
} }
/* Adjust tab bar position when sidebar is collapsed */
[data-sidebar-collapsed='true'] .page-tabs-container,
[data-sidebar-collapsed='true'] .admin-tabs-container {
left: var(--sidebar-width-collapsed);
}
/* Ensure no extra margin from body */ /* Ensure no extra margin from body */
body { body {
margin: 0; margin: 0;
@@ -449,6 +455,12 @@ label,
margin-left: 0; margin-left: 0;
} }
/* Tab bar full width on mobile */
.page-tabs-container,
.admin-tabs-container {
left: 0;
}
/* Show mobile menu button with logo */ /* Show mobile menu button with logo */
.mobile-menu-btn { .mobile-menu-btn {
display: flex; display: flex;
@@ -861,9 +873,9 @@ label,
justify-content: flex-start; justify-content: flex-start;
} }
/* Add bottom padding and remove top padding when bar is at bottom */ /* Remove top padding when bar is at bottom */
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] { [data-tab-position='bottom'] .main-content[data-has-tabs='true'] {
padding-bottom: 0; padding-top: 0;
} }
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content, [data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content,
@@ -954,9 +966,9 @@ label,
display: none; display: none;
} }
/* Add bottom padding and remove top padding */ /* Remove top padding when bar is at bottom */
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] { [data-tab-position='responsive'] .main-content[data-has-tabs='true'] {
padding-bottom: 0; padding-top: 0;
} }
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .page-content, [data-tab-position='responsive'] .main-content[data-has-tabs='true'] .page-content,