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

Add fixed top position for tab bar

Browse Source 
Add CSS rules for data-tab-position='top' and 'responsive' (desktop):
- Fixed positioning at top with proper sidebar offset
- Content padding-top to account for bar height
- Mobile breakpoint handling

🤖 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-24 00:08:50 +01:00
parent 7ca882879b
commit c85a7f9258
1 changed files with 61 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -826,6 +826,67 @@ label,
* Uses data-has-tabs set by TabsScroller to avoid :has() support issues. * Uses data-has-tabs set by TabsScroller to avoid :has() support issues.
*/ */
/* Top position - fixed at top */
[data-tab-position='top'] .page-tabs-container,
[data-tab-position='top'] .admin-tabs-container {
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 0;
z-index: 100;
}
[data-tab-position='top'][data-sidebar-collapsed='true'] .page-tabs-container,
[data-tab-position='top'][data-sidebar-collapsed='true'] .admin-tabs-container {
left: var(--sidebar-width-collapsed);
}
[data-tab-position='top'] .page-content,
[data-tab-position='top'] .admin-tab-content {
padding-top: calc(var(--page-padding-y) + var(--tabs-bar-height, 72px));
}
@media (max-width: 768px) {
[data-tab-position='top'] .page-tabs-container,
[data-tab-position='top'] .admin-tabs-container {
left: 0;
right: 0;
width: 100%;
}
[data-tab-position='top'][data-sidebar-collapsed='true'] .page-tabs-container,
[data-tab-position='top'][data-sidebar-collapsed='true'] .admin-tabs-container {
left: 0;
right: 0;
}
[data-tab-position='top'] .page-content,
[data-tab-position='top'] .admin-tab-content {
padding-top: calc(var(--page-padding-y-mobile) + var(--tabs-bar-height, 72px));
}
}
@media (min-width: 769px) {
[data-tab-position='responsive'] .page-tabs-container,
[data-tab-position='responsive'] .admin-tabs-container {
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 0;
z-index: 100;
}
[data-tab-position='responsive'][data-sidebar-collapsed='true'] .page-tabs-container,
[data-tab-position='responsive'][data-sidebar-collapsed='true'] .admin-tabs-container {
left: var(--sidebar-width-collapsed);
}
[data-tab-position='responsive'] .page-content,
[data-tab-position='responsive'] .admin-tab-content {
padding-top: calc(var(--page-padding-y) + var(--tabs-bar-height, 72px));
}
}
/* Bottom position - fixed at bottom (global setting for all pages) */ /* Bottom position - fixed at bottom (global setting for all pages) */
/* Note: Primary positioning is handled by TabsScroller component with inline styles. /* Note: Primary positioning is handled by TabsScroller component with inline styles.
These CSS rules serve as fallback/additional styling. */ These CSS rules serve as fallback/additional styling. */