From 4b782ff0781867a6a80f8dc7bc8e6da90ec2afac Mon Sep 17 00:00:00 2001
From: Sebastian Krupinski <krupinski01@gmail.com>
Date: Thu, 9 Jul 2026 21:20:30 -0400
Subject: [PATCH] fix(chrono): fit workspace within private layout

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
---
 src/components/DaysView.vue |  2 +-
 src/pages/ChronoPage.vue    | 17 +++++++++++------
 src/routes.ts               |  2 ++
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/DaysView.vue b/src/components/DaysView.vue
index 3748c6e..2c209dc 100644
--- a/src/components/DaysView.vue
+++ b/src/components/DaysView.vue
@@ -326,7 +326,7 @@ function selectionLabel(selection: NonNullable<typeof timeSelection.value>): str
   display: flex;
   flex-direction: column;
   height: 100%;
-  min-height: 600px;
+  min-height: 0;
 }
 
 .days-grid {
diff --git a/src/pages/ChronoPage.vue b/src/pages/ChronoPage.vue
index fcae316..14146a6 100644
--- a/src/pages/ChronoPage.vue
+++ b/src/pages/ChronoPage.vue
@@ -163,7 +163,7 @@ function selectSectionFromRoute() {
 <template>
   <div class="chrono-container">
     <!-- Top Navigation Bar -->
-    <v-app-bar elevation="0" class="chrono-toolbar border-b">
+    <v-toolbar elevation="0" class="chrono-toolbar border-b">
       <template #prepend>
         <v-btn
           icon="mdi-menu"
@@ -172,10 +172,10 @@ function selectSectionFromRoute() {
         ></v-btn>
       </template>
 
-      <v-app-bar-title class="d-flex align-center">
+      <v-toolbar-title class="d-flex align-center">
         <v-icon size="28" color="primary" class="mr-2">mdi-calendar-month</v-icon>
         <span class="text-h6 font-weight-bold">Chrono</span>
-      </v-app-bar-title>
+      </v-toolbar-title>
 
       <v-spacer></v-spacer>
 
@@ -194,13 +194,14 @@ function selectSectionFromRoute() {
         <v-btn value="month" size="small">Month</v-btn>
         <v-btn value="agenda" size="small">Agenda</v-btn>
       </v-btn-toggle>
-    </v-app-bar>
+    </v-toolbar>
 
     <!-- Main Content Area -->
     <div class="chrono-content">
       <!-- Sidebar Navigation Drawer -->
       <v-navigation-drawer
         v-model="sidebarVisible"
+        contained
         :permanent="display.mdAndUp.value"
         :temporary="display.smAndDown.value"
         width="280"
@@ -346,7 +347,8 @@ function selectSectionFromRoute() {
 .chrono-container {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
+  min-height: 0;
   isolation: isolate; /* Create stacking context to prevent style leakage */
 }
 
@@ -357,6 +359,7 @@ function selectSectionFromRoute() {
 .chrono-content {
   display: flex;
   flex: 1;
+  min-height: 0;
   overflow: hidden;
   position: relative;
 }
@@ -368,7 +371,9 @@ function selectSectionFromRoute() {
 
 .chrono-main {
   flex: 1;
-  overflow-y: auto;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
 }
diff --git a/src/routes.ts b/src/routes.ts
index 90bd974..336274e 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -8,11 +8,13 @@ const routes = [
     name: 'calendar',
     path: '/calendar',
     component: () => import('@/pages/ChronoPage.vue'),
+    meta: { layout: 'fixed' },
   },
   {
     name: 'tasks',
     path: '/tasks',
     component: () => import('@/pages/ChronoPage.vue'),
+    meta: { layout: 'fixed' },
   },
 ]