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>
This commit is contained in:
Erik Thiele
2026-07-20 14:56:42 +02:00
parent 097125e7db
commit 4d96dfb9ac
4 changed files with 26 additions and 10 deletions

View File

@@ -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>