diff --git a/src/gui/src/UI/Dashboard/TabHome.js b/src/gui/src/UI/Dashboard/TabHome.js index c9c1670a..75cb2561 100644 --- a/src/gui/src/UI/Dashboard/TabHome.js +++ b/src/gui/src/UI/Dashboard/TabHome.js @@ -30,7 +30,7 @@ function buildRecentAppsHTML () { if ( window.launch_apps?.recent?.length > 0 ) { h += '
'; - // Show up to 6 recent apps + // Show up to 6 recent apps (3 columns x 2 rows) const recentApps = window.launch_apps.recent.slice(0, 6); for ( const app_info of recentApps ) { // if title, name and uuid are the same and index_url is set, then show the hostname of index_url diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css index e0187732..fd60ee70 100644 --- a/src/gui/src/css/style.css +++ b/src/gui/src/css/style.css @@ -5768,6 +5768,19 @@ fieldset[name=number-code] { } } +/* Full HD */ +@media (min-width: 1920px) { + .dashboard-section-home .bento-container { + max-width: 1000px; + } +} +/* 4K UHD */ +@media (min-width: 2560px) { + .dashboard-section-home .bento-container { + max-width: 1200px; + } +} + /* ============================================== */ /* Bento Box Home Dashboard */ /* ============================================== */ @@ -5977,8 +5990,9 @@ fieldset[name=number-code] { .bento-recent-apps-grid { display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 12px; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 16px 12px; + justify-items: center; } .bento-recent-app { @@ -5991,7 +6005,8 @@ fieldset[name=number-code] { transition: transform 0.15s ease; background: transparent; border: 1px solid transparent; - width: 100px; + width: 100%; + max-width: 110px; } .bento-recent-app:hover { @@ -6244,12 +6259,13 @@ fieldset[name=number-code] { } .bento-recent-apps-grid { - grid-template-columns: repeat(3, 1fr); - gap: 8px; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 12px 8px; } .bento-recent-app { padding: 12px 8px; + max-width: 90px; } .bento-recent-app-icon {