fix: Misc frontend layout fixes (#7487)

frontend/app/assets/main.css

@@ -20,16 +20,12 @@
   max-width: 1100px !important;
 }
 
-.theme--dark.v-application {
-  background-color: rgb(var(--v-theme-background, 30, 30, 30)) !important;
+.v-theme--dark.v-application {
+  background-color: rgb(var(--v-theme-background)) !important;
 }
 
-.theme--dark.v-navigation-drawer {
-  background-color: rgb(var(--v-theme-background, 30, 30, 30)) !important;
-}
-
-.theme--dark.v-card {
-  background-color: #1e1e1e !important;
+.v-theme--dark .v-navigation-drawer {
+  background-color: rgb(var(--v-theme-background)) !important;
 }
 
 .left-border {

frontend/app/components/Domain/Recipe/RecipeTimeline.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="height: 100%;">
-    <v-row class="my-0 mx-7">
+    <v-row class="mb-0 mt-3 mx-7">
       <v-spacer />
       <v-col class="text-right">
         <!-- Filters -->
@@ -44,6 +44,7 @@
                   :model-value="option.checked"
                   color="primary"
                   readonly
+                  hide-details
                   @click="toggleEventTypeOption(option.value)"
                 >
                   <template #label>

frontend/app/components/Domain/Recipe/RecipeTimelineItem.vue

@@ -28,7 +28,6 @@
           <v-col v-else cols="9" style="margin: auto; text-align: center">
             {{ event.subject }}
           </v-col>
-          <v-spacer />
           <v-col :cols="useMobileFormat ? 'auto' : '1'" class="px-0 pt-0">
             <RecipeTimelineContextMenu
               v-if="currentUser && currentUser.id == event.userId && event.eventType != 'system'"

frontend/app/plugins/theme.ts

@@ -68,6 +68,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
             warning: theme?.darkWarning ?? "#FF6D00",
             error: theme?.darkError ?? "#EF5350",
             background: "#1E1E1E",
+            surface: "#1E1E1E",
           },
         },
       },