diff --git a/dashboard/src/views/AppsView.vue b/dashboard/src/views/AppsView.vue index 85121c2e1..94389743d 100644 --- a/dashboard/src/views/AppsView.vue +++ b/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(() => {