From 9be35e600c766ec560872869637ad97b19d90e40 Mon Sep 17 00:00:00 2001
From: MiniDigger | Martin <admin@benndorf.dev>
Date: Sun, 16 Jun 2024 21:10:46 +0200
Subject: [PATCH] fix: improve tables on mobile

---
 frontend/src/components/SortableTable.vue | 6 +++---
 frontend/src/components/design/Table.vue  | 7 +++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/SortableTable.vue b/frontend/src/components/SortableTable.vue
index 01101b72b..194238f35 100644
--- a/frontend/src/components/SortableTable.vue
+++ b/frontend/src/components/SortableTable.vue
@@ -93,9 +93,9 @@ const slots = defineSlots<
         <th v-for="header in headers" :key="header.name" :style="header.width ? 'width: ' + header.width : ''" @click="click(header)">
           <div class="items-center inline-flex" :cursor="header.sortable ? 'pointer' : 'auto'">
             <span class="mr-2"> {{ header.title }}</span>
-            <IconMdiSortAscending v-if="sorter[header.name] === 1" />
-            <IconMdiSortDescending v-else-if="sorter[header.name] === -1" />
-            <IconMdiSort v-else-if="header.sortable" class="text-gray-400" />
+            <IconMdiSortAscending v-if="sorter[header.name] === 1" class="hidden md:block" />
+            <IconMdiSortDescending v-else-if="sorter[header.name] === -1" class="hidden md:block" />
+            <IconMdiSort v-else-if="header.sortable" class="text-gray-400 hidden md:block" />
           </div>
         </th>
       </tr>
diff --git a/frontend/src/components/design/Table.vue b/frontend/src/components/design/Table.vue
index 50655ddca..ecc2f8a49 100644
--- a/frontend/src/components/design/Table.vue
+++ b/frontend/src/components/design/Table.vue
@@ -6,6 +6,13 @@
 
 <style lang="scss">
 .simple-table {
+  table-layout: fixed;
+  overflow-wrap: break-word;
+
+  @media (min-width: 768px) {
+    table-layout: auto;
+  }
+
   td,
   th {
     padding: 0.5rem;