minor adjustments to margins and paddings

frontend/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <v-container style="max-width: 1440px" class="mb-7" color="transparent">
+    <v-container class="mb-7" fluid style="width: 1440px">
       <main-nav />
 
       <v-main>
@@ -17,5 +17,4 @@ import MainNav from '@/components/MainNav.vue'
 import BuildServerStats from '@/components/BuildServerStats.vue'
 import Packages from '@/components/Packages.vue'
 import CurrentlyBuilding from '@/components/CurrentlyBuilding.vue'
-
 </script>

frontend/src/components/BuildServerStats.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet class="mt-6" color="transparent">
+  <v-sheet class="mt-2" color="transparent">
     <h5 class="text-h5">Buildserver Stats</h5>
     <iframe
       :height="width <= 800 ? '1050px' : '420px'"

frontend/src/components/CurrentlyBuilding.vue

@@ -6,9 +6,12 @@
     style="border-radius: 10px; border: 2px solid grey"
     variant="elevated">
     <v-card-title>
-      <v-row :class="mobile ? 'mt-1' : ''" align="center" class="w-100">
+      <v-row align="center" class="w-100">
-        <v-col class="ms-4 v-col-12 v-col-sm-1">
+        <v-col class="v-col-12 v-col-md-1">
-          <v-row v-if="packageCount.building > 0" class="flex-nowrap">
+          <v-row
+            v-if="packageCount.building > 0"
+            :class="mobile ? 'mt-1' : ''"
+            class="flex-nowrap ms-1">
             <div class="pulsating-circle-amber me-2" style="transform: translateY(10px)" />
             <span>Building</span>
           </v-row>
@@ -18,7 +21,7 @@
           </v-row>
         </v-col>
 
-        <v-col v-if="packageCount.building > 0" class="v-col-12 v-col-sm-9">
+        <v-col v-if="packageCount.building > 0" class="v-col-12 v-col-md-8">
           <v-progress-linear
             :max="packageCount.built + packageCount.building + packageCount.queued"
             :model-value="packageCount.built"
@@ -30,7 +33,7 @@
 
         <v-col
           :class="mobile ? 'mt-n3' : 'text-end ms-auto'"
-          class="text-grey v-col-12 v-col-sm-auto"
+          class="text-grey v-col-12 v-col-md-2"
           cols="auto"
           style="font-size: 13px">
           Last updated

frontend/src/components/MainNav.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app-bar color="#191c2a" style="background: #0d1538">
-    <v-container :class="mobile ? 'ms-3' : 'ms-auto me-auto'" style="max-width: 1440px">
+    <v-container :class="width < 1440 ? 'ms-3' : 'mx-auto'" fluid style="max-width: 1440px">
       <v-row>
         <v-app-bar-title style="align-self: center">
           <span style="font-size: 20px">
@@ -25,7 +25,7 @@
 import BuildStats from '@/components/BuildStats.vue'
 import { useDisplay } from 'vuetify'
 
-const { mobile } = useDisplay()
+const { mobile, width } = useDisplay()
 </script>
 
 <style scoped></style>

frontend/src/components/Packages.vue

@@ -3,7 +3,7 @@
     <h5 class="text-h5 mb-4">Packages</h5>
 
     <v-row :style="mobile ? '' : 'height: 60px'" width="100%">
-      <v-col class="v-col-12 v-col-sm-2">
+      <v-col class="v-col-12 v-col-sm-4 v-col-lg-2">
         <v-text-field
           v-model="inputPkgBase"
           clearable
@@ -12,7 +12,7 @@
           variant="outlined"></v-text-field>
       </v-col>
 
-      <v-col class="v-col-12 v-col-sm-2 mt-n6 mt-sm-0">
+      <v-col class="v-col-12 v-col-sm-4 v-col-lg-2 mt-n6 mt-sm-0">
         <v-select
           v-model="selectRepo"
           :items="selectRepoItems"
@@ -24,7 +24,7 @@
           variant="outlined"></v-select>
       </v-col>
 
-      <v-col class="v-col-12 v-col-sm-2 mt-n6 mt-sm-0">
+      <v-col class="v-col-12 v-col-sm-4 v-col-lg-2 mt-n6 mt-sm-0">
         <v-select
           v-model="selectStatus"
           :items="selectStatusItems"
@@ -36,11 +36,11 @@
           variant="outlined"></v-select>
       </v-col>
 
-      <v-col class="ms-auto v-col-auto mt-n6 mt-sm-0">
+      <v-col :class="mobile ? 'mt-n6' : ''" :cols="mobile ? 12 : 'auto'" class="ms-auto">
         <v-pagination
           v-model="page"
           :length="pagesMax"
-          :total-visible="mobile ? 5 : 7"
+          :total-visible="mobile ? undefined : 7"
           active-color="primary"
           density="comfortable"
           start="1"