fixed mobile page design

frontend/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app>
-    <v-sheet :style="`width: ${contentWidth}px; margin-left: ${offsetLeft}px;`" color="transparent">
-      <main-nav :style="`padding-left: ${offsetLeft}px; padding-right: ${offsetLeft}px;`" />
+    <v-container style="max-width: 1440px" color="transparent">
+      <main-nav />
 
       <v-main>
         <build-server-stats />
@@ -10,7 +10,7 @@
 
         <packages />
       </v-main>
-    </v-sheet>
+    </v-container>
   </v-app>
 </template>
 
@@ -18,14 +18,6 @@
 import MainNav from '@/components/MainNav.vue'
 import BuildServerStats from '@/components/BuildServerStats.vue'
 import Packages from '@/components/Packages.vue'
-import { onMounted, ref } from 'vue'
 import CurrentlyBuilding from '@/components/CurrentlyBuilding.vue'
 
-const contentWidth = ref(1440)
-const offsetLeft = ref(0)
-
-onMounted(() => {
-  const innerWidth = window.innerWidth
-  offsetLeft.value = (innerWidth - contentWidth.value) / 2
-})
 </script>

frontend/src/components/CurrentlyBuilding.vue

@@ -5,35 +5,40 @@
     rounded
     style="border-radius: 10px; border: 2px solid grey"
     variant="elevated">
-    <v-card-title class="d-flex align-center justify-space-between w-100">
-      <span v-if="packageCount.building > 0" class="d-flex">
+    <v-card-title>
+      <v-row style="width: 100%" class="mt-2" align="center" no-gutters>
+        <v-col class="ms-2" cols="2" v-if="packageCount.building > 0" style="max-width: 130px">
+          <v-row no-gutters>
             <div class="pulsating-circle-amber me-4" style="transform: translateY(10px)"  />
             <span>Building</span>
-      </span>
-      <span v-else class="d-flex">
+          </v-row>
+        </v-col>
+        <v-col class="ms-2" cols="2" v-else>
+          <v-row no-gutters>
             <div class="pulsating-circle-green me-4" style="transform: translateY(10px)" />
             <span>Idle</span>
-      </span>
-      <v-sheet class="d-flex align-center w-100">
+          </v-row>
+        </v-col>
+        <v-col>
           <v-progress-linear
             :max="packageCount.built + packageCount.building + packageCount.queued"
             :model-value="packageCount.built"
             color="light-blue"
             height="10"
             rounded
-          striped
-          style="transform: translateX(-620px)"></v-progress-linear>
-        <span
-          class="text-grey me-2"
-          style="font-size: 13px; min-width: 220px; width: 220px; padding-left: 60px">
+            striped></v-progress-linear>
+        </v-col>
+        <v-col class="text-grey me-2 justify-end pl-4 text-end"
+               style="font-size: 13px; min-width: 200px"
+        cols="1">
           Last updated
           {{
             lastUpdatedSeconds > 59
               ? rtf.format(-Math.floor(lastUpdatedSeconds / 60), 'minutes')
               : rtf.format(-lastUpdatedSeconds, 'seconds')
           }}
-        </span>
-      </v-sheet>
+        </v-col>
+      </v-row>
     </v-card-title>
 
     <v-card-text v-if="packageCount.building > 0 || packageCount.queued > 0" class="d-flex">

frontend/src/components/MainNav.vue

@@ -4,7 +4,9 @@ import BuildStats from '@/components/BuildStats.vue'
 
 <template>
   <v-app-bar color="#191c2a" style="background: #0d1538">
-    <v-app-bar-title style="margin-left: 0 !important">
+    <v-container style="max-width: 1440px">
+      <v-row>
+      <v-app-bar-title style="align-self: center">
       <span style="font-size: 20px">
         ALHP Status
         <a
@@ -17,9 +19,9 @@ import BuildStats from '@/components/BuildStats.vue'
       </span>
       </v-app-bar-title>
 
-    <template v-slot:append>
       <build-stats />
-    </template>
+      </v-row>
+    </v-container>
   </v-app-bar>
 </template>