Nodarx/chrono
1
0
Fork 0
Code Issues 1 Pull Requests 5 Actions Projects Releases Activity

fix(chrono): fit workspace within private layout

Browse Source 
Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
This commit is contained in:
Sebastian Krupinski
2026-07-09 21:20:30 -04:00
parent 38bd5a097a
commit 4b782ff078
3 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DaysView.vue
+1 -1
View File
@@ -326,7 +326,7 @@ function selectionLabel(selection: NonNullable<typeof timeSelection.value>): str
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
min-height: 600px; min-height: 0;
} }
.days-grid { .days-grid {
src/pages/ChronoPage.vue
+11 -6
View File
@@ -163,7 +163,7 @@ function selectSectionFromRoute() {
<template> <template>
<div class="chrono-container"> <div class="chrono-container">
<!-- Top Navigation Bar --> <!-- Top Navigation Bar -->
<v-app-bar elevation="0" class="chrono-toolbar border-b"> <v-toolbar elevation="0" class="chrono-toolbar border-b">
<template #prepend> <template #prepend>
<v-btn <v-btn
icon="mdi-menu" icon="mdi-menu"
@@ -172,10 +172,10 @@ function selectSectionFromRoute() {
></v-btn> ></v-btn>
</template> </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> <v-icon size="28" color="primary" class="mr-2">mdi-calendar-month</v-icon>
<span class="text-h6 font-weight-bold">Chrono</span> <span class="text-h6 font-weight-bold">Chrono</span>
</v-app-bar-title> </v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
@@ -194,13 +194,14 @@ function selectSectionFromRoute() {
<v-btn value="month" size="small">Month</v-btn> <v-btn value="month" size="small">Month</v-btn>
<v-btn value="agenda" size="small">Agenda</v-btn> <v-btn value="agenda" size="small">Agenda</v-btn>
</v-btn-toggle> </v-btn-toggle>
</v-app-bar> </v-toolbar>
<!-- Main Content Area --> <!-- Main Content Area -->
<div class="chrono-content"> <div class="chrono-content">
<!-- Sidebar Navigation Drawer --> <!-- Sidebar Navigation Drawer -->
<v-navigation-drawer <v-navigation-drawer
v-model="sidebarVisible" v-model="sidebarVisible"
contained
:permanent="display.mdAndUp.value" :permanent="display.mdAndUp.value"
:temporary="display.smAndDown.value" :temporary="display.smAndDown.value"
width="280" width="280"
@@ -346,7 +347,8 @@ function selectSectionFromRoute() {
.chrono-container { .chrono-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100%;
min-height: 0;
isolation: isolate; /* Create stacking context to prevent style leakage */ isolation: isolate; /* Create stacking context to prevent style leakage */
} }
@@ -357,6 +359,7 @@ function selectSectionFromRoute() {
.chrono-content { .chrono-content {
display: flex; display: flex;
flex: 1; flex: 1;
min-height: 0;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
@@ -368,7 +371,9 @@ function selectSectionFromRoute() {
.chrono-main { .chrono-main {
flex: 1; flex: 1;
overflow-y: auto; min-height: 0;
min-width: 0;
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
src/routes.ts
+2
View File
@@ -8,11 +8,13 @@ const routes = [
name: 'calendar', name: 'calendar',
path: '/calendar', path: '/calendar',
component: () => import('@/pages/ChronoPage.vue'), component: () => import('@/pages/ChronoPage.vue'),
meta: { layout: 'fixed' },
}, },
{ {
name: 'tasks', name: 'tasks',
path: '/tasks', path: '/tasks',
component: () => import('@/pages/ChronoPage.vue'), component: () => import('@/pages/ChronoPage.vue'),
meta: { layout: 'fixed' },
}, },
] ]