From 614ceb36556596ba0639152ec415d344c26e0db0 Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Tue, 24 Feb 2026 12:25:00 +0100
Subject: [PATCH] fix responsive in modelsTableManager

---
 .../models/models-table/ModelsTable.vue       | 20 +++++++++++------
 .../specific/models/models-table/columns.js   | 22 +++++++++----------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/specific/models/models-table/ModelsTable.vue b/src/components/specific/models/models-table/ModelsTable.vue
index c9cc5dec..0a0a2d47 100644
--- a/src/components/specific/models/models-table/ModelsTable.vue
+++ b/src/components/specific/models/models-table/ModelsTable.vue
@@ -142,7 +142,7 @@ export default {
   ],
   setup(props) {
     const { t } = useI18n();
-    const { isLG, isXL } = useStandardBreakpoints();
+    const { isLG, isXL, isXXL } = useStandardBreakpoints();
     const { projectFileStructure } = useFiles();
 
     const modelsTable = ref(null);
@@ -150,11 +150,17 @@ export default {
       let filteredColumns = columnsDef;
       if (isLG.value) {
         filteredColumns = filteredColumns.filter((col) =>
-          ["name", "status", "actions"].includes(col.id)
+          ["name", "status", "actions"].includes(col.id),
         );
       } else if (isXL.value) {
         filteredColumns = filteredColumns.filter((col) =>
-          ["name", "creator", "lastupdate", "status", "actions"].includes(col.id)
+          ["name", "tags", "creator", "lastupdate", "status", "actions"].includes(col.id),
+        );
+      } else if (isXXL.value) {
+        filteredColumns = filteredColumns.filter((col) =>
+          ["name", "tags", "location", "creator", "lastupdate", "status", "actions"].includes(
+            col.id,
+          ),
         );
       }
       return filteredColumns.map((col) => ({
@@ -170,7 +176,7 @@ export default {
         nameEditMode = reactive({});
         props.models.forEach((model) => (nameEditMode[model.id] = false));
       },
-      { immediate: true }
+      { immediate: true },
     );
 
     const getFoldersInFolder = (folder) => collectDescendants(folder, isFolder);
@@ -183,7 +189,7 @@ export default {
         } else {
           return [];
         }
-      })
+      }),
     );
     const allFiles = computed(() =>
       projectFileStructure.value.children.flatMap((file) => {
@@ -192,7 +198,7 @@ export default {
         } else {
           return file;
         }
-      })
+      }),
     );
 
     const tagsByModelId = computed(() => {
@@ -216,7 +222,7 @@ export default {
       props.models.map((model) => ({
         ...model,
         tags: tagsByModelId.value[model.id] ?? [],
-      }))
+      })),
     );
 
     return {
diff --git a/src/components/specific/models/models-table/columns.js b/src/components/specific/models/models-table/columns.js
index 400c98d5..e995dc53 100644
--- a/src/components/specific/models/models-table/columns.js
+++ b/src/components/specific/models/models-table/columns.js
@@ -3,11 +3,11 @@ export default [
     id: "id",
     label: "ID",
     width: "100px",
-    align: "center"
+    align: "center",
   },
   {
     id: "name",
-    text: "t.name"
+    text: "t.name",
   },
   {
     id: "tags",
@@ -15,41 +15,41 @@ export default [
     filter: true,
     filterKey: "name",
     width: "100px",
-    align: "center"
+    align: "center",
   },
   {
     id: "location",
     text: "ModelsTable.headers.location",
-    width: "200px",
-    align: "left"
+    width: "150px",
+    align: "left",
   },
   {
     id: "version",
     text: "ModelsTable.headers.version",
     width: "100px",
-    align: "center"
+    align: "center",
   },
   {
     id: "creator",
     text: "t.createdBy",
     width: "160px",
-    align: "center"
+    align: "center",
   },
   {
     id: "lastupdate",
     text: "t.modifiedOn",
     width: "160px",
-    align: "center"
+    align: "center",
   },
   {
     id: "status",
     text: "t.status",
     width: "120px",
-    align: "center"
+    align: "center",
   },
   {
     id: "actions",
     label: " ",
-    width: "200px"
-  }
+    width: "200px",
+  },
 ];