From a837305f2a9ec1f2595c462ec5b12e2c55d339a1 Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Wed, 31 May 2023 21:26:59 +0200
Subject: [PATCH] fix list view

---
 src/components/ViewModes/ListView.vue | 86 ++++++++++++++-------------
 1 file changed, 44 insertions(+), 42 deletions(-)

diff --git a/src/components/ViewModes/ListView.vue b/src/components/ViewModes/ListView.vue
index d35578f..3cc3481 100644
--- a/src/components/ViewModes/ListView.vue
+++ b/src/components/ViewModes/ListView.vue
@@ -30,7 +30,7 @@ const deleteSelectedNotes = (closeModal: () => void) => {
 }
 </script>
 <template>
-  <div class="flex flex-col gap-2 overflow-x-auto">
+  <div class="flex flex-col gap-2">
     <div class="flex items-center gap-2">
       <div class="flex items-center">
         <span class="whitespace-nowrap">
@@ -60,46 +60,48 @@ const deleteSelectedNotes = (closeModal: () => void) => {
         class="my-1 ml-auto mr-1 max-w-xs flex-grow"
       ></UIInputText>
     </div>
-    <UITable density="compact" class="w-full">
-      <thead>
-        <tr>
-          <th class="w-[48px]"></th>
-          <th>Note title</th>
-          <th class="w-[75px]">Words</th>
-          <th class="w-[100px]">References</th>
-          <th class="w-[150px]">Modified</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="note in notesWithReferences"
-          :key="note.id"
-          class="dui-hover hover:cursor-pointer"
-          @click="setActiveNote(note.id)"
-        >
-          <th @click.stop="toggleRow(note)" class="text-center">
-            <label>
-              <UIInputCheckbox
-                color="primary"
-                :checked="Boolean(selectedNotes[note.id])"
-                :disabled="note.isRoot"
-              ></UIInputCheckbox>
-            </label>
-          </th>
-          <td>
-            <i class="fas fa-fw fa-home mr-1 text-secondary" v-if="note.isRoot" />
-            {{ note.title }}
-          </td>
-          <td>{{ note.wordCount }}</td>
-          <td>
-            <UIBadge v-if="note.references.length > 0">
-              <i data-v-41bbc26f="" class="fas fa-fw fa-sign-out-alt mr-1"></i>
-              {{ note.references.length }}
-            </UIBadge>
-          </td>
-          <td>{{ formatDate(note.modified) }}</td>
-        </tr>
-      </tbody>
-    </UITable>
+    <div class="overflow-x-auto">
+      <UITable density="compact" class="w-full">
+        <thead>
+          <tr>
+            <th class="w-[48px]"></th>
+            <th>Note title</th>
+            <th class="w-[75px]">Words</th>
+            <th class="w-[100px]">References</th>
+            <th class="w-[150px]">Modified</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="note in notesWithReferences"
+            :key="note.id"
+            class="dui-hover hover:cursor-pointer"
+            @click="setActiveNote(note.id)"
+          >
+            <th @click.stop="toggleRow(note)" class="text-center">
+              <label>
+                <UIInputCheckbox
+                  color="primary"
+                  :checked="Boolean(selectedNotes[note.id])"
+                  :disabled="note.isRoot"
+                ></UIInputCheckbox>
+              </label>
+            </th>
+            <td>
+              <i class="fas fa-fw fa-home mr-1 text-secondary" v-if="note.isRoot" />
+              {{ note.title }}
+            </td>
+            <td>{{ note.wordCount }}</td>
+            <td>
+              <UIBadge v-if="note.references.length > 0">
+                <i data-v-41bbc26f="" class="fas fa-fw fa-sign-out-alt mr-1"></i>
+                {{ note.references.length }}
+              </UIBadge>
+            </td>
+            <td>{{ formatDate(note.modified) }}</td>
+          </tr>
+        </tbody>
+      </UITable>
+    </div>
   </div>
 </template>