fixed packages for mobile

frontend/src/components/Packages.vue

@@ -2,16 +2,17 @@
   <v-sheet class="mt-6" color="transparent" width="100%">
     <h5 class="text-h5 mb-4">Packages</h5>
 
-    <v-sheet class="d-flex justify-space-between" color="transparent" width="100%">
+    <v-row :style="mobile ? '' : 'height: 60px'" width="100%">
-      <v-sheet class="d-flex align-center w-50" color="transparent" style="gap: 15px">
+      <v-col class="v-col-12 v-col-sm-2">
         <v-text-field
           v-model="inputPkgBase"
           clearable
           color="primary"
           placeholder="Search Pkgbase"
-          style="width: 30%; height: 60px"
           variant="outlined"></v-text-field>
+      </v-col>
 
+      <v-col class="v-col-12 v-col-sm-2 mt-n6 mt-sm-0">
         <v-select
           v-model="selectRepo"
           :items="selectRepoItems"
@@ -20,9 +21,10 @@
           item-value="value"
           return-object
           single-line
-          style="width: 30%; height: 60px"
           variant="outlined"></v-select>
+      </v-col>
 
+      <v-col class="v-col-12 v-col-sm-2 mt-n6 mt-sm-0">
         <v-select
           v-model="selectStatus"
           :items="selectStatusItems"
@@ -31,38 +33,42 @@
           item-value="value"
           return-object
           single-line
-          style="width: 30%; height: 60px"
           variant="outlined"></v-select>
-      </v-sheet>
+      </v-col>
 
-      <v-sheet
+      <v-col class="ms-auto v-col-auto mt-n6 mt-sm-0">
-        class="d-flex align-center justify-end w-50"
-        color="transparent"
-        style="height: 60px">
         <v-pagination
           v-model="page"
           :length="pagesMax"
+          :total-visible="mobile ? 5 : 7"
           active-color="primary"
           density="comfortable"
           start="1"
-          total-visible="7"
           variant="text"></v-pagination>
-      </v-sheet>
+      </v-col>
-    </v-sheet>
+    </v-row>
 
-    <v-table class="mt-6" style="width: 100%; background: transparent; font-size: 1rem">
+    <v-table class="mt-2 mt-sm-6" style="width: 100%; background: transparent; font-size: 1rem">
       <thead>
         <tr>
           <th scope="col">Repository</th>
           <th scope="col">Pkgbase</th>
           <th scope="col">Status</th>
           <th scope="col">Reason</th>
-          <th
+          <th scope="col">
-            scope="col"
-            title="link time optimization&#10;does not guarantee that package is actually built with LTO">
             LTO
+            <v-tooltip activator="parent" location="bottom">
+              Link time optimization;
+              <br />
+              Does not guarantee that package is actually built with LTO
+            </v-tooltip>
+          </th>
+          <th scope="col">
+            DS
+            <v-tooltip activator="parent" location="bottom">
+              Debug-symbols available via debuginfod
+            </v-tooltip>
           </th>
-          <th scope="col" title="Debug-symbols available via debuginfod">DS</th>
           <th scope="col">Archlinux Version</th>
           <th scope="col">ALHP Version</th>
           <th class="text-end" scope="col" style="width: 30px">Info</th>
@@ -78,7 +84,7 @@
             v-for="(pkg, index) in packages"
             :key="index"
             :style="`background-color: ${getStatus(pkg.status)};`">
-            <td class="font-weight-bold">
+            <td class="font-weight-bold text-no-wrap">
               {{ pkg.repo.split('-')[0] }}
               <v-chip
                 :color="getVersionColor(pkg.repo.split('-')[pkg.repo.split('-').length - 1])"
@@ -89,7 +95,7 @@
                 {{ pkg.repo.split('-')[pkg.repo.split('-').length - 1] }}
               </v-chip>
             </td>
-            <td>{{ pkg.pkgbase }}</td>
+            <td class="text-no-wrap">{{ pkg.pkgbase }}</td>
             <td>{{ pkg.status.toLocaleUpperCase() }}</td>
             <td>{{ pkg.skip_reason || '' }}</td>
             <td><i :class="getLto(pkg.lto).class" :title="getLto(pkg.lto).title"></i></td>
@@ -107,7 +113,7 @@
                 class="text-decoration-none"
                 style="
                   color: darkgrey;
-                  transform: translateY(-3px) translateX(-15px);
+                  transform: translateY(-3px) translateX(-22px);
                   max-width: 15px;
                 "
                 target="_blank">
@@ -152,6 +158,9 @@
 import { onMounted, ref, UnwrapRef, watch } from 'vue'
 import { type Package } from '@/types/Package'
 import { type Packages } from '@/types/Packages'
+import { useDisplay } from 'vuetify'
+
+const { mobile } = useDisplay()
 
 const inputPkgBase = ref('')
 const selectRepo = ref({ title: 'Repository (any)', value: 'any' })