Try fix width table columns layouts (#212)

datagouv · Dec 18, 2024 · d051d17 · d051d17
1 parent 8024e6c
commit d051d17
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/components/AdminTable/AdminDatasetsTable/AdminDatasetsTable.vue b/components/AdminTable/AdminDatasetsTable/AdminDatasetsTable.vue
@@ -9,30 +9,32 @@
         >
           {{ t('Title of the dataset') }}
         </AdminTableTh>
-        <AdminTableTh scope="col">
+        <AdminTableTh class="w-20" scope="col">
           {{ t("Status") }}
         </AdminTableTh>
         <AdminTableTh
+          class="w-36"
           :sorted="sorted('created')"
           scope="col"
           @sort="(direction: SortDirection) => updateSort('created', direction)"
         >
           {{ t('Created at') }}
         </AdminTableTh>
         <AdminTableTh
+          class="w-36"
           :sorted="sorted('last_update')"
           scope="col"
           @sort="(direction: SortDirection) => updateSort('last_update', direction)"
         >
           {{ t('Updated at') }}
         </AdminTableTh>
-        <AdminTableTh scope="col">
+        <AdminTableTh class="w-16" scope="col">
           {{ t('Files') }}
         </AdminTableTh>
-        <AdminTableTh scope="col">
+        <AdminTableTh class="w-36" scope="col">
           {{ t('Score') }}
         </AdminTableTh>
-        <AdminTableTh scope="col">
+        <AdminTableTh class="w-16" scope="col">
           <Tooltip>
             <span
               class="fr-icon--sm fr-icon-chat-3-line"
@@ -44,6 +46,7 @@
           </Tooltip>
         </AdminTableTh>
         <AdminTableTh
+          class="w-16"
           :sorted="sorted('views')"
           scope="col"
           @sort="(direction: SortDirection) => updateSort('views', direction)"
@@ -58,7 +61,7 @@
             </template>
           </Tooltip>
         </AdminTableTh>
-        <AdminTableTh scope="col">
+        <AdminTableTh class="w-16" scope="col">
           <Tooltip>
             <span
               class="fr-icon--sm fr-icon-download-line"
@@ -70,6 +73,7 @@
           </Tooltip>
         </AdminTableTh>
         <AdminTableTh
+          class="w-16"
           :sorted="sorted('reuses')"
           scope="col"
           @sort="(direction: SortDirection) => updateSort('reuses', direction)"
@@ -85,6 +89,7 @@
           </Tooltip>
         </AdminTableTh>
         <AdminTableTh
+          class="w-16"
           :sorted="sorted('followers')"
           scope="col"
           @sort="(direction: SortDirection) => updateSort('followers', direction)"

diff --git a/components/AdminTable/Table/AdminTableTh.vue b/components/AdminTable/Table/AdminTableTh.vue
@@ -1,10 +1,10 @@
 <template>
-  <th class="fr-text--bold">
-    <slot v-if="!sortable"></slot>
-    <div class="fr-grid-row fr-grid-row--middle justify-between" v-else>
-      <slot></slot>
+  <th class="font-bold">
+    <div class="flex items-center justify-between whitespace-nowrap">
+      <slot />
       <button
-        class="fr-ml-1w fr-btn fr-btn--sm fr-btn--tertiary-no-outline"
+        v-if="sortable"
+        class="shrink-0 fr-ml-1w fr-btn fr-btn--sm fr-btn--tertiary-no-outline"
         :class="{
           'fr-icon-arrow-down-line': !sorted || sorted === 'asc',
           'fr-icon-arrow-up-line': sorted === 'desc',