Big cleanup for styling

frontend/src/App.vue

@@ -1,26 +1,15 @@
 <template>
   <v-app>
-    <div class="flex flex-row">
-      <!-- Side Bar for larger screens -->
-      <div v-if="!smAndDown" class="border-r-1 z-30">
+    <div class="flex flex-row font-sans bg-hBackground text-hOnBackground">
+
+      <div class="fixed border-r-1 min-h-screen border-r border-[#3d3d3d]">
         <side-bar></side-bar>
       </div>
 
-      <!-- Mobile -->
-      <div v-if="smAndDown" class="mobile-container">
-        <div v-if="!brandingStore.loading"
-             class="min-h-screen justify-center items-center bg-hBackground">
-          <router-view></router-view>
-        </div>
+      <div class="ml-64 w-full flex justify-center items-center ">
+        <router-view></router-view>
       </div>
 
-      <!-- PC -->
-      <div v-if="!smAndDown" class="w-full ml-64">
-        <div v-if="!brandingStore.loading"
-             class="min-h-screen justify-center items-center bg-hBackground">
-          <router-view></router-view>
-        </div>
-      </div>
     </div>
 
   </v-app>
@@ -28,20 +17,9 @@
 
 <script async setup>
 import SideBar from "@/views/main/SideBar.vue";
-import { useBrandingStore } from "@/stores/brandingStore.js";
-import { useDisplay } from "vuetify";
-
-const { smAndDown } = useDisplay();
-const brandingStore = useBrandingStore();
 </script>
 
 <style scoped>
-/* Ensure content does not overflow on mobile */
-.mobile-container {
-  width: 100%; /* Full width for mobile */
-  max-width: 100vw; /* Prevent overflow */
-  overflow-x: hidden; /* Hide horizontal overflow */
-  padding: 0; /* Remove extra padding */
-  box-sizing: border-box; /* Include padding in width/height calculation */
-}
+
+
 </style>