From 77980828f5799a72abed7a3c99704cc0be32626e Mon Sep 17 00:00:00 2001
From: matteoscrugli <ma.scrugli@gmail.com>
Date: Tue, 23 Dec 2025 23:42:11 +0100
Subject: [PATCH] Use fixed position for tab bar (top and bottom)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/frontend/src/styles/Layout.css b/frontend/src/styles/Layout.css
index 5d5f167..fb21352 100644
--- a/frontend/src/styles/Layout.css
+++ b/frontend/src/styles/Layout.css
@@ -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,