bug: fix sticky headers

Author: lukepolo

layouts/components/MainContent.vue

@@ -23,10 +23,10 @@ const containContentValue = computed(() => containContent?.value ?? true);
       :open="rightSidebarOpen"
       @update:open="setRightSidebarOpen"
       side="right"
-      class="!min-h-[calc(100svh-var(--header-height))]"
+      class="min-h-0 h-full"
     >
       <SidebarMobileSync />
-      <SidebarInset class="!min-h-[calc(100svh-var(--header-height))]">
+      <SidebarInset class="overflow-visible min-h-0 h-full">
         <!-- todo fix bg color bg-muted/10 -->
         <div
           class="p-4 w-full self-center"
@@ -47,13 +47,14 @@ const containContentValue = computed(() => containContent?.value ?? true);
 <style scoped>
 /* Override SidebarProvider's --sidebar-height and --sidebar-width variables */
 .main-content-wrapper :deep(.group\/sidebar-wrapper) {
-  --sidebar-height: calc(100svh - var(--header-height)) !important;
+  --sidebar-height: 100% !important;
   --sidebar-width: 22rem !important;
+  min-height: 0 !important;
 }
 
 /* Define sidebar height variable for right sidebar group */
 .main-content-wrapper :deep(.main-content-sidebar.group[data-side="right"]) {
-  --sidebar-height: calc(100svh - var(--header-height));
+  --sidebar-height: 100%;
 }
 
 /* Override the fixed sidebar div positioning */
@@ -62,7 +63,7 @@ const containContentValue = computed(() => containContent?.value ?? true);
     .main-content-sidebar.group[data-side="right"]
       > div[class*="fixed"][class*="inset-y-0"]
   ) {
-  top: var(--header-height) !important;
+  top: 0 !important;
   bottom: auto !important;
 }
 </style>

layouts/components/TopNav.vue

@@ -40,7 +40,7 @@ const { setRightSidebarOpen, rightSidebarOpen } = useRightSidebar();
 
 <template>
   <nav
-    class="text-sm w-full bg-[#28282b] border-t border-[#3a3a3d] border-b-2 border-[#18181b] shadow-lg flex items-center justify-between px-4 z-50 relative sticky top-0"
+    class="text-sm w-full bg-[#28282b] border-t border-[#3a3a3d] border-b-2 border-[#18181b] shadow-lg flex items-center justify-between px-4 z-50 sticky top-0"
   >
     <div class="flex items-center gap-2 relative">
       <NuxtLink

layouts/default.vue

@@ -43,15 +43,13 @@ provide("containContent", containContent);
   <SidebarProvider>
     <AppSidebar v-if="showLeftNav" />
 
-    <SidebarInset>
+    <SidebarInset class="flex flex-col overflow-auto" style="height: 100svh">
       <TopNav v-if="!showLeftNav" />
       <AppHeader class="px-6" v-if="showLeftNav" />
 
-      <div class="flex flex-1 flex-col">
-        <MainContent>
-          <slot></slot>
-        </MainContent>
-      </div>
+      <MainContent class="flex-1">
+        <slot></slot>
+      </MainContent>
     </SidebarInset>
   </SidebarProvider>