From f3d4b6d5b9c78d5a46246bc3a375870288edb50b Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Thu, 25 Jan 2024 22:00:28 +0100
Subject: [PATCH] fixed currently-building for mobile

---
 frontend/src/components/CurrentlyBuilding.vue | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/CurrentlyBuilding.vue b/frontend/src/components/CurrentlyBuilding.vue
index 3cab4dc..6b5f609 100644
--- a/frontend/src/components/CurrentlyBuilding.vue
+++ b/frontend/src/components/CurrentlyBuilding.vue
@@ -6,32 +6,32 @@
     style="border-radius: 10px; border: 2px solid grey"
     variant="elevated">
     <v-card-title>
-      <v-row style="width: 100%" class="mt-2 mb-1" align="center" no-gutters>
-        <v-col class="ms-2 me-2" cols="2" v-if="packageCount.building > 0" style="max-width: 130px">
-          <v-row no-gutters class="flex-nowrap">
-            <div class="pulsating-circle-amber me-4" style="transform: translateY(10px)"  />
+      <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)" />
             <span>Building</span>
           </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)" />
+          <v-row v-else class="flex-nowrap" no-gutters>
+            <div class="pulsating-circle-green me-3" style="transform: translateY(10px)" />
             <span>Idle</span>
           </v-row>
         </v-col>
-        <v-col>
+
+        <v-col v-if="packageCount.building > 0">
           <v-progress-linear
             :max="packageCount.built + packageCount.building + packageCount.queued"
             :model-value="packageCount.built"
             color="light-blue"
             height="10"
             rounded
-            style="min-width: 50px"
             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">
+
+        <v-col
+          class="text-grey justify-end text-end ms-auto"
+          cols="1"
+          style="font-size: 13px; min-width: 200px">
           Last updated
           {{
             lastUpdatedSeconds > 59
@@ -42,8 +42,10 @@
       </v-row>
     </v-card-title>
 
-    <v-card-text v-if="packageCount.building > 0 || packageCount.queued > 0" class="d-flex">
-      <v-list width="50%">
+    <v-card-text
+      v-if="packageCount.building > 0 || packageCount.queued > 0"
+      class="d-flex flex-column flex-sm-row">
+      <v-list width="100%">
         <v-list-subheader>Building</v-list-subheader>
         <v-list-item v-for="(pkg, index) in packages.building" :key="index">
           <template v-slot:prepend>
@@ -56,7 +58,7 @@
         </v-list-item>
       </v-list>
 
-      <v-list width="50%">
+      <v-list width="100%">
         <v-list-subheader>Queued</v-list-subheader>
         <v-list-item
           v-for="(pkg, index) in packages.queued.slice(0, packageCount.building)"