fix: fill maximized main window

frontend/src/App.vue

@@ -29,9 +29,11 @@ onMounted(() => {
 <style scoped>
 .app-root {
   width: 100%;
-  height: 100vh;
+  height: 100%;
+  min-height: 100vh;
   min-width: 0;
   overflow: hidden;
+  background: inherit;
 }
 
 .drag-region {

frontend/src/layouts/MainLayout.vue

@@ -72,7 +72,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="flex h-screen w-full min-w-0 overflow-hidden bg-slate-100 font-sans text-slate-950 dark:bg-slate-950 dark:text-white">
+  <div class="flex h-full min-h-screen w-full min-w-0 overflow-hidden bg-slate-100 font-sans text-slate-950 dark:bg-slate-950 dark:text-white">
     <aside
       class="flex w-64 shrink-0 flex-col border-r border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900"
       :class="isMacOS ? 'pt-10' : 'pt-4'"

frontend/src/style.css

@@ -7,8 +7,17 @@ body,
 #app {
   width: 100%;
   height: 100%;
+  min-width: 100%;
+  min-height: 100%;
   margin: 0;
   overflow: hidden;
+  background: rgb(241 245 249);
+}
+
+html.dark,
+html.dark body,
+html.dark #app {
+  background: rgb(2 6 23);
 }
 
 * {
@@ -16,7 +25,7 @@ body,
 }
 
 body {
-  @apply bg-white text-black dark:bg-gray-900 dark:text-white;
+  @apply text-slate-950 dark:text-white;
 }
 
 .drag-region {