Calculate better app grid item widths based on view width

dashboard/src/views/AppsView.vue

@@ -235,6 +235,20 @@ function toggleView() {
   localStorage.appsView = viewType.value;
 }
 
+const view = useTemplateRef('view');
+const itemWidth = ref('unset');
+
+function setItemWidth() {
+  if (!view.value) return;
+
+  const width = view.value.offsetWidth;
+  const gap = 25; // grid item margin offset
+
+  if (width <= 360) itemWidth.value = '100%';
+  else if (width <= 550) itemWidth.value = Number((width-gap*2)/2).toFixed() + 'px';
+  else itemWidth.value = '190px';
+}
+
 onActivated(async () => {
   await refreshApps();
   ready.value = true;
@@ -249,6 +263,9 @@ onActivated(async () => {
   tagFilter.value = tagFilterOptions.value[0].id;
 
   refreshInterval = setInterval(refreshApps, 5000);
+
+  setItemWidth();
+  window.addEventListener('resize', setItemWidth);
 });
 
 onDeactivated(() => {
@@ -260,7 +277,7 @@ onDeactivated(() => {
 </script>
 
 <template>
-  <div class="content-large">
+  <div ref="view" class="content-large">
     <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <ApplinkDialog ref="applinkDialog" @success="refreshApps"/>
     <PostInstallDialog ref="postInstallDialog"/>
@@ -285,7 +302,7 @@ onDeactivated(() => {
       </div>
 
       <TransitionGroup name="grid-animation" tag="div" class="grid" v-if="viewType === VIEW_TYPE.GRID">
-        <a v-for="app in filteredApps" :key="app.id" class="grid-item" @click="onOpenApp(app, $event)" :href="'https://' + app.fqdn" target="_blank">
+        <a v-for="app in filteredApps" :key="app.id" class="grid-item" @click="onOpenApp(app, $event)" :href="'https://' + app.fqdn" target="_blank" :style="{ width: itemWidth }">
           <img :alt="app.label || app.subdomain || app.fqdn" :src="app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
           <div class="grid-item-label" v-fit-text>{{ app.label || app.subdomain || app.fqdn }}</div>
           <div class="grid-item-task-label" v-if="app.type === APP_TYPES.LINK">{{ $t('app.appLink.title') }}</div>