chore(deps): update dependency vue-tsc to v3.3.7

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

package-lock.json

@@ -681,16 +681,16 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "3.3.6",
+      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.3.7.tgz",
-      "integrity": "sha512-LgBMZAy2sR3cQWknpyaxnI6yBkqDfLBPkbdhwRhQCvzfNJRQXPilgQIrdI/v4ytJ0sAq9bWhaPsjqBqneomJ3Q==",
+      "integrity": "sha512-LzmkKinXAMMoh8Jfi/jMUSDUjuPdv8mynH5WJGKfXyZtDw3hQ6GBaoI6Bcnl/Xqlu32q/0Z6i/trp4VXykzyLw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@volar/language-core": "2.4.28",
         "@vue/compiler-dom": "^3.5.0",
         "@vue/shared": "^3.5.0",
-        "alien-signals": "^3.2.0",
+        "alien-signals": "^3.2.1",
         "muggle-string": "^0.4.1",
         "path-browserify": "^1.0.1",
         "picomatch": "^4.0.4"
@@ -1765,14 +1765,14 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "3.3.6",
+      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.3.7.tgz",
-      "integrity": "sha512-ERXGgbKSBGFUkavrJ1Iwj0ZVxKqB/5UOx65IXy7fPf2UsoI21n3ssQLwdvx8xyUGgJe9PvSZTM/FYzIdwUDPFA==",
+      "integrity": "sha512-+C+rgD49wAQ5bUTl2sp5a8Bzg4YoldMNXM+g7CFe604MYcQ8PrZPMQhIjJSzKXtPBCa+C5ayMipqjbA7splekQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@volar/typescript": "2.4.28",
-        "@vue/language-core": "3.3.6"
+        "@vue/language-core": "3.3.7"
       },
       "bin": {
         "vue-tsc": "bin/vue-tsc.js"

src/pages/ChronoPage.vue

@@ -22,6 +22,7 @@ import { EpochSpan } from '@/types/date';
 
 // Vuetify display
 const display = useDisplay();
+const isMobile = computed(() => display.mdAndDown.value);
 
 // Check if chrono manager is available
 const moduleStore = useModuleStore();
@@ -163,7 +164,7 @@ function selectSectionFromRoute() {
 <template>
   <div class="chrono-container">
     <!-- Top Navigation Bar -->
-    <v-toolbar elevation="0" class="chrono-toolbar border-b">
+    <v-toolbar elevation="0" density="compact" class="chrono-toolbar">
       <template #prepend>
         <v-btn
           icon="mdi-menu"
@@ -173,8 +174,8 @@ function selectSectionFromRoute() {
       </template>
 
       <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="24" color="primary" class="mr-2">mdi-calendar-month</v-icon>
-        <span class="text-h6 font-weight-bold">Chrono</span>
+        <span class="text-subtitle-1 font-weight-bold">Chrono</span>
       </v-toolbar-title>
 
       <v-spacer></v-spacer>
@@ -202,8 +203,8 @@ function selectSectionFromRoute() {
       <v-navigation-drawer
         v-model="sidebarVisible"
         contained
-        :permanent="display.mdAndUp.value"
+        :permanent="sidebarVisible && !isMobile"
-        :temporary="display.smAndDown.value"
+        :temporary="isMobile"
         width="280"
         class="chrono-sidebar"
       >
@@ -353,6 +354,7 @@ function selectSectionFromRoute() {
 }
 
 .chrono-toolbar {
+  flex-shrink: 0;
   border-bottom: 1px solid rgb(var(--v-border-color)) !important;
 }
 
@@ -385,10 +387,6 @@ function selectSectionFromRoute() {
   flex-direction: column;
 }
 
-.border-b {
-  border-bottom: 1px solid rgb(var(--v-border-color));
-}
-
 /* Responsive adjustments */
 @media (max-width: 960px) {
   .chrono-main {