web/app/src/views/TagsView.vue

@@ -121,35 +121,20 @@ export default {
     const tag_options = {
       columns: [
         {
-          title: "",
+          title: 'Name',
-          headerHozAlign: "right",
+          field: 'name',
-          formatter: (cell) => {
+          sorter: 'string',
-            const button = document.createElement("button");
+          editor: 'input',
-            button.classList.add("remove-tag-button");
+          vertAlign: 'center',
-            button.innerHTML = "X";
+          widthGrow: 1,
-            button.addEventListener("click", () => {
-              const tag = cell.getRow().getData();
-              this.deleteTag(tag);
-            });
-
-            return button;
-          },
-          headerSort: false,
-          vertAlign: "center",
-        },
-        {
-          title: "Name",
-          field: "name",
-          sorter: "string",
-          editor: "input",
-          vertAlign: "center",
         },
         {
           title: 'Description',
           field: 'description',
           sorter: 'string',
           editor: 'input',
-          vertAlign: "center",
+          vertAlign: 'center',
+          widthGrow: 2,
 
           formatter(cell) {
             const cellValue = cell.getData().description;
@@ -159,8 +144,27 @@ export default {
             return cellValue;
           },
         },
+        {
+          title: '',
+          headerHozAlign: 'right',
+          width: 60,
+
+          formatter: (cell) => {
+            const button = document.createElement('button');
+            button.classList.add('remove-tag-button');
+            button.innerHTML = '❌';
+            button.addEventListener('click', () => {
+              const tag = cell.getRow().getData();
+              this.deleteTag(tag);
+            });
+
+            return button;
+          },
+          headerSort: false,
+          vertAlign: 'center',
+        },
       ],
-      layout: 'fitData',
+      layout: 'fitColumns',
       layoutColumnsOnNewData: true,
       height: '82%',
       selectable: false,