From c85a7f925867e922f98b6e7c610a71e21be3e7a1 Mon Sep 17 00:00:00 2001
From: matteoscrugli <ma.scrugli@gmail.com>
Date: Wed, 24 Dec 2025 00:08:50 +0100
Subject: [PATCH] Add fixed top position for tab bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/styles/Layout.css | 61 ++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/frontend/src/styles/Layout.css b/frontend/src/styles/Layout.css
index 34ec36d..4d23263 100644
--- a/frontend/src/styles/Layout.css
+++ b/frontend/src/styles/Layout.css
@@ -826,6 +826,67 @@ label,
  * 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) */
 /* Note: Primary positioning is handled by TabsScroller component with inline styles.
    These CSS rules serve as fallback/additional styling. */