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 {