fix: improve tables on mobile

HangarMC · Jun 16, 2024 · 9be35e6 · 9be35e6
1 parent f69efdd
commit 9be35e6
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git 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
@@ -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;