From 60982cc27632538ad043c7a54a3bd0aa47e94a72 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Sun, 21 Sep 2025 14:42:21 +0200
Subject: [PATCH] Calculate better appstore item width based on screen

---
 dashboard/src/views/AppstoreView.vue | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/dashboard/src/views/AppstoreView.vue b/dashboard/src/views/AppstoreView.vue
index dda154ed5..4b22f3703 100644
--- a/dashboard/src/views/AppstoreView.vue
+++ b/dashboard/src/views/AppstoreView.vue
@@ -165,6 +165,19 @@ async function onHashChange() {
   }
 }
 
+const view = useTemplateRef('view');
+const itemWidth = ref('unset');
+
+function setItemWidth() {
+  const width = view.value.offsetWidth;
+  const gap = 20; // flexbox gap value
+
+  if (width <= 575) itemWidth.value = '100%';
+  else if (width <= 800) itemWidth.value = Number((width-gap*2)/2).toFixed() + 'px';
+  else if (width <= 1024) itemWidth.value = Number((width-gap*3)/3).toFixed() + 'px';
+  else itemWidth.value = Number((width-gap*4)/4).toFixed() + 'px';
+}
+
 onMounted(async () => {
   await getInstalledApps();
   await getAppList();
@@ -173,16 +186,21 @@ onMounted(async () => {
   // only deals with #/appstore/ hashes
   window.addEventListener('hashchange', onHashChange);
   onHashChange();
+
+  window.addEventListener('resize', setItemWidth);
+
+  setItemWidth();
 });
 
 onUnmounted(() => {
   window.removeEventListener('hashchange', onHashChange);
+  window.removeEventListener('resize', setItemWidth);
 });
 
 </script>
 
 <template>
-  <div class="content-large" style="width: 100%; height: 100%;">
+  <div ref="view" class="content-large" style="width: 100%; height: 100%;">
     <InputDialog ref="inputDialog"/>
     <AppInstallDialog ref="appInstallDialog" @close="onAppInstallDialogClose"/>
 
@@ -201,17 +219,17 @@ onUnmounted(() => {
       <div v-if="!search">
         <h4 v-show="filteredPopularApps.length">{{ $t('appstore.category.popular') }}</h4>
         <div class="grid">
-          <AppStoreItem v-for="app in filteredPopularApps" :app="app" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)"/>
+          <AppStoreItem :style="{ width: itemWidth }" v-for="app in filteredPopularApps" :app="app" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)"/>
         </div>
 
         <h4 v-show="filteredAllApps.length">{{ $t('appstore.category.all') }}</h4>
         <div class="grid">
-          <AppStoreItem v-for="app in filteredAllApps" :app="app" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)"/>
+          <AppStoreItem :style="{ width: itemWidth }" v-for="app in filteredAllApps" :app="app" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)"/>
         </div>
       </div>
       <div v-else style="margin-top: 20px">
         <div class="grid">
-          <AppStoreItem v-for="app in filteredApps" :app="app" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)"/>
+          <AppStoreItem :style="{ width: itemWidth }" v-for="app in filteredApps" :app="app" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)"/>
         </div>
       </div>
     </div>
@@ -248,7 +266,6 @@ onUnmounted(() => {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
-  justify-content: space-around;
 }
 
 </style>