From 4d96dfb9ac093710dc937ed1d31b7f91e1308ec7 Mon Sep 17 00:00:00 2001
From: Erik Thiele <erik.thiele@cancom.de>
Date: Mon, 20 Jul 2026 14:56:42 +0200
Subject: [PATCH] Use full page width with a responsive link grid

The layout was capped at 1200px and listed links in a single column.
Drop the cap and lay the cards out in a grid: three per row on wide
screens, two from 1000px, one below that.

To make the narrower cards work, shorten the edit action to an icon
button so the title and URL keep their room, and let the edit form's
field and button rows wrap.

Also fixes pre-existing horizontal overflow on phone widths by
stacking the sidebar above the content and letting the add-link form
wrap. Grid tracks use minmax(0, 1fr) so cards can shrink below their
content's intrinsic width instead of pushing the page wider.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/templates/_link_card.html      |  8 +++++---
 app/templates/_link_card_edit.html |  8 ++++----
 app/templates/base.html            | 15 ++++++++++++++-
 app/templates/index.html           |  5 +++--
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/app/templates/_link_card.html b/app/templates/_link_card.html
index cb0829c..73ba02c 100644
--- a/app/templates/_link_card.html
+++ b/app/templates/_link_card.html
@@ -10,12 +10,14 @@
         🕓 hinzugefügt am {{ link.created_at | datum }}
       </div>
     </div>
-    <div style="display:flex; gap:4px; flex-shrink:0;">
-      <button class="ghost" style="padding:4px 10px; font-size:.8rem;"
+    <div style="display:flex; gap:4px; flex-shrink:0; align-items:flex-start;">
+      <button class="ghost" style="padding:4px 9px; font-size:.85rem;"
+              title="Bearbeiten"
               hx-get="/links/{{ link.id }}/edit"
               hx-target="#link-{{ link.id }}"
-              hx-swap="outerHTML">✎ Bearbeiten</button>
+              hx-swap="outerHTML">✎</button>
       <button class="danger"
+              title="Löschen"
               hx-delete="/links/{{ link.id }}"
               hx-target="#link-{{ link.id }}"
               hx-swap="outerHTML"
diff --git a/app/templates/_link_card_edit.html b/app/templates/_link_card_edit.html
index 81d3eaf..cfebac3 100644
--- a/app/templates/_link_card_edit.html
+++ b/app/templates/_link_card_edit.html
@@ -18,12 +18,12 @@
       <textarea name="summary" rows="3" style="width:100%; background:var(--panel2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:10px 12px; font-size:.95rem; font-family:inherit;">{{ link.summary }}</textarea>
     </div>
 
-    <div style="display:flex; gap:12px;">
-      <div class="field" style="flex:1;">
+    <div style="display:flex; gap:12px; flex-wrap:wrap;">
+      <div class="field" style="flex:1 1 160px;">
         <label>Kategorie</label>
         <input type="text" name="category" value="{{ link.category }}">
       </div>
-      <div class="field" style="flex:1;">
+      <div class="field" style="flex:1 1 160px;">
         <label>Hersteller / Quelle</label>
         <input type="text" name="manufacturer" value="{{ link.manufacturer }}">
       </div>
@@ -34,7 +34,7 @@
       <input type="text" name="tags" value="{{ link.tag_list | join(', ') }}">
     </div>
 
-    <div style="display:flex; justify-content:space-between; gap:8px; margin-top:4px;">
+    <div style="display:flex; justify-content:space-between; gap:8px; margin-top:4px; flex-wrap:wrap;">
       <div style="display:flex; gap:8px;">
         <button type="submit">Speichern</button>
         <button type="button" class="ghost"
diff --git a/app/templates/base.html b/app/templates/base.html
index 2efb57a..f058187 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -44,10 +44,23 @@
       border-radius: 8px; padding: 6px 10px; font-size: .85rem; font-family: inherit;
       cursor: pointer;
     }
-    .layout { display: flex; gap: 24px; max-width: 1200px; margin: 24px auto; padding: 0 24px; }
+    .layout { display: flex; gap: 24px; margin: 24px auto; padding: 0 24px; }
     .sidebar { width: 240px; flex-shrink: 0; }
     .main { flex: 1; min-width: 0; }
     .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
+
+    /* Linkliste: bis zu drei Karten pro Zeile, je nach Fensterbreite. */
+    #links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
+    #links > .panel { margin-bottom: 0; }
+    #links > #empty-state { grid-column: 1 / -1; }
+    @media (min-width: 1000px) { #links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+    @media (min-width: 1500px) { #links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+
+    /* Auf schmalen Geräten die Seitenleiste über den Inhalt stellen. */
+    @media (max-width: 800px) {
+      .layout { flex-direction: column; gap: 16px; padding: 0 16px; }
+      .sidebar { width: auto; }
+    }
     .facet-group h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 8px; }
     .facet { display: flex; justify-content: space-between; padding: 5px 8px; border-radius: 6px; font-size: .9rem; }
     .facet:hover { background: var(--panel2); text-decoration: none; }
diff --git a/app/templates/index.html b/app/templates/index.html
index c3cdaa0..2c47afb 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -54,8 +54,9 @@
       <form hx-post="/links" hx-target="#links" hx-swap="afterbegin"
             hx-disabled-elt="button"
             hx-on::after-request="if(event.detail.successful){this.reset(); var e=document.getElementById('empty-state'); if(e) e.remove();}">
-        <div style="display:flex; gap:8px;">
-          <input type="url" name="url" placeholder="Link einfügen, z.B. https://hersteller.de/produkt" required>
+        <div style="display:flex; gap:8px; flex-wrap:wrap;">
+          <input type="url" name="url" placeholder="Link einfügen, z.B. https://hersteller.de/produkt" required
+                 style="flex:1 1 220px; width:auto;">
           <button type="submit" style="white-space:nowrap;">
             <span class="htmx-indicator">⏳</span> Hinzufügen
           </button>