Use fixed position for tab bar (top and bottom)
- 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:
@@ -20,9 +20,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: margin-left 0.3s ease;
|
||||
overflow-y: auto;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
padding-top: var(--tabs-bar-height, 72px);
|
||||
}
|
||||
|
||||
/* Adjust main content when sidebar is collapsed */
|
||||
@@ -38,12 +36,20 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.75rem;
|
||||
position: sticky;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: var(--sidebar-width);
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
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 */
|
||||
body {
|
||||
margin: 0;
|
||||
@@ -449,6 +455,12 @@ label,
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Tab bar full width on mobile */
|
||||
.page-tabs-container,
|
||||
.admin-tabs-container {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Show mobile menu button with logo */
|
||||
.mobile-menu-btn {
|
||||
display: flex;
|
||||
@@ -861,9 +873,9 @@ label,
|
||||
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'] {
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content,
|
||||
@@ -954,9 +966,9 @@ label,
|
||||
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'] {
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .page-content,
|
||||
|
||||
Reference in New Issue
Block a user