fix: render of sources' hashes

zaldivards · Aug 23, 2024 · 4a653b5 · 4a653b5
1 parent af069e6
commit 4a653b5
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -304,8 +304,6 @@ export default {
   .dt-responsive-table table tbody td {
     display: block !important;
     padding: 5px 5px 5px 5px;
-    white-space: nowrap !important;
-    width: 400px !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
   }

diff --git a/client/src/views/ExtraSettings.vue b/client/src/views/ExtraSettings.vue
@@ -3,7 +3,8 @@
         <ConfirmDialog :draggable="false" />
         <Toast class="z-5" />
         <div class="px-3 lg:px-0 w-full lg:w-4 m-auto">
-            <Message severity="warn">Please make sure your relational DB and Redis instance (if needed) are up and
+            <Message severity="warn" :closable="false">Please make sure your relational DB and Redis instance (if
+                needed) are up and
                 running</Message>
             <h1 class="mb-0">Extra settings</h1>
             <div class="flex flex-column gap-2">

diff --git a/client/src/views/SourcesManager.vue b/client/src/views/SourcesManager.vue
@@ -1,12 +1,12 @@
 <template>
-    <div class="my-6 justify-content-center">
+    <div class="my-6">
         <ConfirmDialog :draggable="false" />
         <Toast class="z-5" />
-        <div class="px-3 lg:px-0 w-screen lg:w-10 m-auto">
+        <div class="px-3 lg:px-0 lg:w-10 m-auto">
             <h1>Manage sources</h1>
-            <DataTable v-model:selection="selectedSources" :value="sources" dataKey="id" paginator size="large"
-                :rows="size" :totalRecords="totalRecords" :rowsPerPageOptions="[5, 10]" @page="pageUpdated" :lazy="true"
-                :loading="loading" class="dt-responsive-table" :pt="{
+            <DataTable v-model:selection="selectedSources" :value="sources" dataKey="id" paginator size="normal"
+                selectionMode="multiple" :rows="size" :totalRecords="totalRecords" :rowsPerPageOptions="[5, 10]"
+                @page="pageUpdated" :lazy="true" :loading="loading" class="dt-responsive-table" :pt="{
                     bodyRow: { class: 'bg-black-alpha-40 text-white' }, header: { class: 'bg-black-alpha-40 border-none' }
                 }">
 
@@ -26,6 +26,9 @@
                     </div>
                 </template>
 
+                <Column selectionMode="multiple" :pt="{
+                    headerCell: { class: 'bg-blue-800 text-white' }
+                }" class="border-t-1 border-black-alpha-60" />
                 <Column field="id" header="ID" :pt="{
                     headerCell: { class: 'bg-blue-800 text-white' }
                 }" class="border-t-1 border-black-alpha-60" />
@@ -34,10 +37,7 @@
                 }" class="border-t-1 border-black-alpha-60" />
                 <Column field="digest" header="Digest" :pt="{
                     headerCell: { class: 'bg-blue-800 text-white' }
-                }" class="border-t-1 border-black-alpha-60" />
-                <Column selectionMode="multiple" headerStyle="width: 3rem" :pt="{
-                    headerCell: { class: 'bg-blue-800 text-white' }
-                }" class="border-t-1 border-black-alpha-60" />
+                }" class="border-t-1 border-black-alpha-60 hash-style" />
                 <template #empty>No sources available</template>
             </DataTable>
             <button @click="deleteSources"
@@ -180,4 +180,10 @@ export default {
         }
     }
 }
-</script>
+</script>
+<style>
+.hash-style {
+    word-break: break-all;
+    overflow-wrap: break-word
+}
+</style>