fixed currently-building for mobile

frontend/src/components/CurrentlyBuilding.vue

@@ -6,10 +6,10 @@
     style="border-radius: 10px; border: 2px solid grey"
     variant="elevated">
     <v-card-title>
-      <v-row align="center" class="w-100 flex-nowrap" no-gutters>
-        <v-col class="ms-2 me-4" cols="2" style="min-width: 100px">
-          <v-row v-if="packageCount.building > 0" class="flex-nowrap" no-gutters>
-            <div class="pulsating-circle-amber me-3" style="transform: translateY(10px)" />
+      <v-row :class="mobile ? 'mt-1' : ''" align="center" class="w-100">
+        <v-col class="ms-4 v-col-12 v-col-sm-1">
+          <v-row v-if="packageCount.building > 0" class="flex-nowrap">
+            <div class="pulsating-circle-amber me-2" style="transform: translateY(10px)" />
             <span>Building</span>
           </v-row>
           <v-row v-else class="flex-nowrap" no-gutters>
@@ -18,7 +18,7 @@
           </v-row>
         </v-col>
 
-        <v-col v-if="packageCount.building > 0">
+        <v-col v-if="packageCount.building > 0" class="v-col-12 v-col-sm-9">
           <v-progress-linear
             :max="packageCount.built + packageCount.building + packageCount.queued"
             :model-value="packageCount.built"
@@ -29,9 +29,10 @@
         </v-col>
 
         <v-col
-          class="text-grey justify-end text-end ms-auto"
-          cols="1"
-          style="font-size: 13px; min-width: 200px">
+          :class="mobile ? 'mt-n3' : 'text-end ms-auto'"
+          class="text-grey v-col-12 v-col-sm-auto"
+          cols="auto"
+          style="font-size: 13px">
           Last updated
           {{
             lastUpdatedSeconds > 59
@@ -88,10 +89,13 @@
 import { onMounted, ref } from 'vue'
 import type { Packages } from '@/types/Packages'
 import { Package } from '@/types/Package'
+import { useDisplay } from 'vuetify'
 
 // This variable sets the update-interval
 const updateIntervalInMinutes = 5
 
+const { mobile } = useDisplay()
+
 const lastUpdatedTime = ref(0)
 const lastUpdatedSeconds = ref(0)
 const rtf = new Intl.RelativeTimeFormat('en', {
@@ -133,7 +137,7 @@ const getTotalPackages = () => {
 }
 
 const getBuiltPackages = () => {
-  fetch('https://api.alhp.dev/packages?limit=0&offset=0&status=build', {
+  fetch('https://api.alhp.dev/packages?limit=1&offset=0&status=build', {
     method: 'GET'
   })
     .then((response) => {
@@ -150,7 +154,7 @@ const getBuiltPackages = () => {
 }
 
 const getBuildingPackages = () => {
-  fetch('https://api.alhp.dev/packages?limit=0&offset=0&status=building', {
+  fetch('https://api.alhp.dev/packages?limit=1&offset=0&status=building', {
     method: 'GET'
   })
     .then((response) => {
@@ -167,7 +171,7 @@ const getBuildingPackages = () => {
 }
 
 const getQueuedPackages = () => {
-  fetch('https://api.alhp.dev/packages?limit=0&offset=0&status=queued', {
+  fetch('https://api.alhp.dev/packages?limit=1&offset=0&status=queued', {
     method: 'GET'
   })
     .then((response) => {