Header: transición fluida al colapsar sidebar (CSS variable + group-has)

- h-(--header-height) en vez de h-12 hardcodeado
- transition-[width,height] ease-linear para animación
- data-[orientation=vertical]:h-4 en Separator
- h1 en vez de Breadcrumb (más limpio, estilo demo)
- Layout simplificado sin div anidado redundante

src/App.vue

@@ -4,12 +4,6 @@ import { useAuthStore } from '@/stores/auth'
 import { useProjectsStore } from '@/stores/projects'
 import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar'
 import { Separator } from '@/components/ui/separator'
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from '@/components/ui/breadcrumb'
 import AppSidebar from '@/components/AppSidebar.vue'
 import LoginView from '@/views/LoginView.vue'
 import DashboardView from '@/views/DashboardView.vue'
@@ -44,19 +38,20 @@ onMounted(() => {
     <AppSidebar v-model:active-tab="activeTab" />
 
     <SidebarInset>
-      <header class="flex h-12 shrink-0 items-center gap-2 border-b px-4">
+      <header class="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
-        <SidebarTrigger class="-ml-1" />
+        <div class="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
-        <Separator orientation="vertical" class="mr-2 h-4" />
+          <SidebarTrigger class="-ml-1" />
-        <Breadcrumb>
+          <Separator
-          <BreadcrumbList>
+            orientation="vertical"
-            <BreadcrumbItem>
+            class="mx-2 data-[orientation=vertical]:h-4"
-              <BreadcrumbPage>{{ tabTitles[activeTab] }}</BreadcrumbPage>
+          />
-            </BreadcrumbItem>
+          <h1 class="text-base font-medium">
-          </BreadcrumbList>
+            {{ tabTitles[activeTab] }}
-        </Breadcrumb>
+          </h1>
+        </div>
       </header>
 
-      <main class="flex-1 p-6">
+      <main class="flex flex-1 flex-col p-4 pt-0 md:gap-6 md:py-6">
         <DashboardView v-if="activeTab === 'dashboard'" />
         <CalendarView v-else-if="activeTab === 'calendar'" />
         <SchedulerView v-else-if="activeTab === 'scheduler'" />

src/views/DashboardView.vue

@@ -18,8 +18,8 @@ const project = computed(() => projects.selected)
 </script>
 
 <template>
-  <div v-if="project" class="flex flex-1 flex-col gap-4">
+  <div v-if="project" class="@container/main flex flex-1 flex-col gap-2">
-    <div class="flex items-center justify-between">
+    <div class="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
       <div>
         <h1 class="text-2xl font-bold tracking-tight">{{ project.name }}</h1>
         <div class="flex items-center gap-2 mt-1">