Show up to 8 recent apps on 4K screens in TabHome

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 ) {

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;