From e9de33764590170c76809fa429ab50bf5bc49d95 Mon Sep 17 00:00:00 2001
From: jelveh <nj@puter.com>
Date: Tue, 9 Dec 2025 15:49:08 -0800
Subject: [PATCH] Show up to 8 recent apps on 4K screens in TabHome

---
 src/gui/src/UI/Dashboard/TabHome.js |  4 ++--
 src/gui/src/css/style.css           | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/gui/src/UI/Dashboard/TabHome.js b/src/gui/src/UI/Dashboard/TabHome.js
index 75cb2561d..197b7d469 100644
--- a/src/gui/src/UI/Dashboard/TabHome.js
+++ b/src/gui/src/UI/Dashboard/TabHome.js
@@ -30,8 +30,8 @@ function buildRecentAppsHTML () {
     if ( window.launch_apps?.recent?.length > 0 ) {
         h += '<div class="bento-recent-apps-grid">';
 
-        // Show up to 6 recent apps (3 columns x 2 rows)
-        const recentApps = window.launch_apps.recent.slice(0, 6);
+        // Show up to 8 recent apps (4 columns x 2 rows on 4K, 3x2 on smaller screens with last 2 hidden via CSS)
+        const recentApps = window.launch_apps.recent.slice(0, 8);
         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
             if ( app_info.name === app_info.title && app_info.name === app_info.uuid && app_info.index_url ) {
diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css
index fd60ee708..c631eaa71 100644
--- a/src/gui/src/css/style.css
+++ b/src/gui/src/css/style.css
@@ -5995,6 +5995,22 @@ fieldset[name=number-code] {
     justify-items: center;
 }
 
+/* Hide 7th and 8th apps on screens below 4K (show only 6) */
+.bento-recent-app:nth-child(n+7) {
+    display: none;
+}
+
+/* Show all 8 apps on 4K UHD screens */
+@media (min-width: 2560px) {
+    .bento-recent-apps-grid {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+    
+    .bento-recent-app:nth-child(n+7) {
+        display: flex;
+    }
+}
+
 .bento-recent-app {
     display: flex;
     flex-direction: column;