diff --git a/dashboard/src/views/AppsView.vue b/dashboard/src/views/AppsView.vue index 34d6bfb66..432c91355 100644 --- a/dashboard/src/views/AppsView.vue +++ b/dashboard/src/views/AppsView.vue @@ -234,6 +234,7 @@ function toggleView() { const view = useTemplateRef('view'); const itemWidth = ref('unset'); +const itemSpacing = ref('10px'); function setItemWidth() { if (!view.value) return; @@ -241,9 +242,18 @@ function setItemWidth() { 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'; + if (width <= 360) { + itemWidth.value = '100%'; + itemSpacing.value = '10px'; + } else if (width <= 550) { + itemWidth.value = Number((width-gap*2)/2).toFixed(); + itemSpacing.value = '10px'; + } else { + itemWidth.value = '190px'; + + const itemsPerRow = Math.floor(width/(190+20)); + itemSpacing.value = Math.floor(((width - (190*itemsPerRow)) / itemsPerRow-1)/2) + 'px'; + } } onActivated(async () => { @@ -300,7 +310,7 @@ onDeactivated(() => { - +
{{ app.label || app.subdomain || app.fqdn }}
{{ $t('app.appLink.title') }}