From c884e9da52dd031aa263881025b29566517a2ad9 Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Mon, 2 Feb 2026 13:02:29 +0100
Subject: [PATCH] ui: make landing diagrams readable

---
 frontend/src/pages/index.astro | 46 +++++++++++++++++++++++++++++++---
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index e3c3cf1..24abe9a 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -730,10 +730,14 @@ import PublicLayout from '../layouts/PublicLayout.astro';
     line-height: 1.6;
   }
 
+  .section-how .section-container {
+    max-width: 1240px;
+  }
+
   .diagram-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 2rem;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
   }
 
   @media (max-width: 900px) {
@@ -742,6 +746,29 @@ import PublicLayout from '../layouts/PublicLayout.astro';
     }
   }
 
+  .diagram-card {
+    display: grid;
+    grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
+    grid-template-areas:
+      "head diagram"
+      "foot diagram";
+    column-gap: 2rem;
+    row-gap: 0.75rem;
+    align-items: start;
+  }
+
+  @media (max-width: 900px) {
+    .diagram-card {
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        "head"
+        "diagram"
+        "foot";
+      column-gap: 0;
+      row-gap: 0;
+    }
+  }
+
   .diagram-header h4 {
     font-size: 1.125rem;
     margin: 0 0 0.5rem;
@@ -754,19 +781,32 @@ import PublicLayout from '../layouts/PublicLayout.astro';
     line-height: 1.5;
   }
 
+  .diagram-header {
+    grid-area: head;
+  }
+
   .diagram {
+    grid-area: diagram;
     width: 100%;
     height: auto;
-    margin-top: 1.25rem;
+    margin-top: 0;
+    min-width: 0;
   }
 
   .diagram-footer {
+    grid-area: foot;
     margin-top: 1.25rem;
     color: var(--color-text-muted);
     font-size: 0.875rem;
     line-height: 1.5;
   }
 
+  @media (min-width: 901px) {
+    .diagram-footer {
+      margin-top: 0.25rem;
+    }
+  }
+
   .diagram-link {
     font-weight: 500;
   }