From bb85a8d63d07b1aa14ac867c0f958224b47f34ef Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Sat, 28 Mar 2026 21:48:38 +0100
Subject: [PATCH] fix(landing): vertical columns layout - each category as a
 column

Categories are now side-by-side columns with heading on top and apps
stacked vertically below. 7 columns on desktop, wraps on smaller screens.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../apps/landing/src/pages/apps/index.astro   | 32 ++++++++-----------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/apps/manacore/apps/landing/src/pages/apps/index.astro b/apps/manacore/apps/landing/src/pages/apps/index.astro
index ce66f23a7..3bca7fc74 100644
--- a/apps/manacore/apps/landing/src/pages/apps/index.astro
+++ b/apps/manacore/apps/landing/src/pages/apps/index.astro
@@ -81,12 +81,12 @@ const sections: Section[] = [
   <div class="min-h-screen bg-white dark:bg-gray-900">
     <Navbar />
 
-    {sections.map((section) => (
-      <div>
-        <div class="border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 px-6 py-3">
-          <span class="font-bold text-sm text-gray-900 dark:text-gray-100 tracking-tight">{section.label}</span>
-        </div>
-        <div class="app-grid">
+    <div class="columns-layout">
+      {sections.map((section) => (
+        <div class="column">
+          <div class="border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 px-4 py-3">
+            <span class="font-bold text-sm text-gray-900 dark:text-gray-100 tracking-tight">{section.label}</span>
+          </div>
           {section.apps.map((app) => (
             <a
               href={app.url}
@@ -100,40 +100,34 @@ const sections: Section[] = [
             </a>
           ))}
         </div>
-      </div>
-    ))}
+      ))}
+    </div>
 
     <Footer />
   </div>
 </Layout>
 
 <style>
-  .app-grid {
+  .columns-layout {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
   }
 
   @media (min-width: 640px) {
-    .app-grid {
+    .columns-layout {
       grid-template-columns: repeat(3, 1fr);
     }
   }
 
   @media (min-width: 768px) {
-    .app-grid {
+    .columns-layout {
       grid-template-columns: repeat(4, 1fr);
     }
   }
 
   @media (min-width: 1024px) {
-    .app-grid {
-      grid-template-columns: repeat(5, 1fr);
-    }
-  }
-
-  @media (min-width: 1280px) {
-    .app-grid {
-      grid-template-columns: repeat(6, 1fr);
+    .columns-layout {
+      grid-template-columns: repeat(7, 1fr);
     }
   }
 </style>