diff --git a/ui/src/views/datatype/DataTypeTableView.vue b/ui/src/views/datatype/DataTypeTableView.vue
index 583890a3b09022d222acf186693a6f40b6ae0fff..9981c8651d17fe4aaad6ba917e1811687b983d40 100644
--- a/ui/src/views/datatype/DataTypeTableView.vue
+++ b/ui/src/views/datatype/DataTypeTableView.vue
@@ -264,7 +264,7 @@
       </div>
     </div>
     <div v-if="showFilter" class="notification" role="search">
-      <div class="column">
+      <div class="column" id="tagsCollapse">
         <TagsCollapse v-if="tagsColumn && Object.keys(tagsColumn).length > 1" :tags="tagsColumn"/>
       </div>
       <h2>{{ $t("applications.filter") }}</h2>
@@ -750,6 +750,13 @@ export default class DataTypeTableView extends Vue {
       }
     }
     this.tagsColumn = tags;
+    if (Object.keys(this.tags).length <= 4) {
+      document.getElementById('tagsCollapse').className = 'column is-offset-one-third is-one-third';
+    } else if (Object.keys(this.tags).length <= 8) {
+      document.getElementById('tagsCollapse').className = 'column is-offset-one-fifth is-three-fifths';
+    } else {
+      document.getElementById('tagsCollapse').className = 'column';
+    }
   }
 
   getRefType(checkerRow) {
diff --git a/ui/src/views/datatype/DataTypesManagementView.vue b/ui/src/views/datatype/DataTypesManagementView.vue
index c9e33f863cd36aced09f5b6179fa4bddc407b6e8..c0681fa7193f89941016b3dfb90ee8dc04ece8c5 100644
--- a/ui/src/views/datatype/DataTypesManagementView.vue
+++ b/ui/src/views/datatype/DataTypesManagementView.vue
@@ -14,7 +14,7 @@
       }}
     </h1>
 
-    <div class="column is-offset-one-third is-one-third">
+    <div class="column" id="tagsCollapse">
       <TagsCollapse v-if="tags && Object.keys(tags).length > 1" :tags="tags" />
     </div>
     <AvailablityChart v-if="false" />
@@ -203,6 +203,13 @@ export default class DataTypesManagementView extends Vue {
       dataType.localtags = dataType.tags.map((tag) => tags[tag]?.localName || tag);
     }
     this.tags = tags;
+    if (Object.keys(this.tags).length <= 4) {
+      document.getElementById('tagsCollapse').className = 'column is-offset-one-third is-one-third';
+    } else if (Object.keys(this.tags).length <= 8) {
+      document.getElementById('tagsCollapse').className = 'column is-offset-one-fifth is-three-fifths';
+    } else {
+      document.getElementById('tagsCollapse').className = 'column';
+    }
   }
 
   toggle(tag) {
diff --git a/ui/src/views/references/ReferenceTableView.vue b/ui/src/views/references/ReferenceTableView.vue
index f94ffed15cd7f8f148857fb55bf598a593e9be68..4925757708aaf91f2a1ceb6e8ec074f7354da397 100644
--- a/ui/src/views/references/ReferenceTableView.vue
+++ b/ui/src/views/references/ReferenceTableView.vue
@@ -9,7 +9,7 @@
     <h1 class="title main-title">
       {{ $t("titles.references-data", {refName: application.localRefName}) }}
     </h1>
-    <div class="column is-offset-one-third is-one-third">
+    <div class="column" id="tagsCollapse">
       <TagsCollapse v-if="tagsColumn && Object.keys(tagsColumn).length > 1" :tags="tagsColumn"/>
     </div>
     <LoadingAnimate v-if="isLoading" :size="'is-large'"></LoadingAnimate>
@@ -205,7 +205,6 @@ export default class ReferenceTableView extends Vue {
   display = "__display_" + window.localStorage.lang;
   loadedReferences = {};
   currentReferenceDetail = {active: false};
-  currentReferenceDetail = {active: false};
   referenceTypeForReferencingColumns = [];
 
   async recalculate(column, value) {
@@ -309,6 +308,13 @@ export default class ReferenceTableView extends Vue {
       );
     }
     this.tagsColumn = tags;
+    if (Object.keys(this.tags).length <= 4) {
+      document.getElementById('tagsCollapse').className = 'column is-offset-one-third is-one-third';
+    } else if (Object.keys(this.tags).length <= 8) {
+      document.getElementById('tagsCollapse').className = 'column is-offset-one-fifth is-three-fifths';
+    } else {
+      document.getElementById('tagsCollapse').className = 'column';
+    }
   }
 
   get columnsToBeShown() {
diff --git a/ui/src/views/references/ReferencesManagementView.vue b/ui/src/views/references/ReferencesManagementView.vue
index 6116bb5b39c0363a75733a097cd5dfa8cc9c9a82..d1536458da78f72ce02281e1bef24e15f79d3c6c 100644
--- a/ui/src/views/references/ReferencesManagementView.vue
+++ b/ui/src/views/references/ReferencesManagementView.vue
@@ -22,7 +22,7 @@
         </b-message>
       </div>
     </div>
-    <div class="column is-offset-one-third is-one-third">
+    <div class="column" id="tagsCollapse">
       <TagsCollapse v-if="tags && Object.keys(tags).length > 1" :tags="tags" />
     </div>
     <div class="section">
@@ -127,6 +127,13 @@ export default class ReferencesManagementView extends Vue {
       reference.localtags = reference.tags.map((tag) => tags[tag]?.localName || tag);
     }
     this.tags = tags;
+    if (Object.keys(this.tags).length <= 4) {
+      document.getElementById('tagsCollapse').className = 'column is-offset-one-third is-one-third';
+    } else if (Object.keys(this.tags).length <= 8) {
+      document.getElementById('tagsCollapse').className = 'column is-offset-one-fifth is-three-fifths';
+    } else {
+      document.getElementById('tagsCollapse').className = 'column';
+    }
   }
 
   created() {