From 84b6ca99ae903fe245ea70270c03637a9642f027 Mon Sep 17 00:00:00 2001
From: Erik Thiele <erik.thiele@cancom.de>
Date: Thu, 30 Jul 2026 15:22:48 +0200
Subject: [PATCH] Expand card to full grid width while editing

Both the link and prompt edit forms were squeezed into a single grid
column, making the summary/prompt textarea cramped. Add a
.card-edit-wide class (grid-column: 1 / -1) applied to the edit
partial's root element so it spans all columns instead, and lay out
category/tags side by side in the prompt edit form to use the extra
width. Also gives the prompt content textarea more rows (6 -> 12)
since there's now room for it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/templates/_link_card_edit.html   |  2 +-
 app/templates/_prompt_card_edit.html | 31 ++++++++++++++--------------
 app/templates/base.html              |  2 ++
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/app/templates/_link_card_edit.html b/app/templates/_link_card_edit.html
index da11230..c71a16f 100644
--- a/app/templates/_link_card_edit.html
+++ b/app/templates/_link_card_edit.html
@@ -1,5 +1,5 @@
 {% import "_icons.html" as icons %}
-<div class="panel link-card" id="link-{{ link.id }}">
+<div class="panel link-card card-edit-wide" id="link-{{ link.id }}">
   <form hx-put="/links/{{ link.id }}" hx-target="#link-{{ link.id }}" hx-swap="outerHTML"
         hx-disabled-elt="button">
     <div class="muted" style="font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
diff --git a/app/templates/_prompt_card_edit.html b/app/templates/_prompt_card_edit.html
index 71a57b5..444fdab 100644
--- a/app/templates/_prompt_card_edit.html
+++ b/app/templates/_prompt_card_edit.html
@@ -1,5 +1,5 @@
 {% import "_icons.html" as icons %}
-<div class="panel link-card" id="prompt-{{ prompt.id }}">
+<div class="panel link-card card-edit-wide" id="prompt-{{ prompt.id }}">
   <form hx-put="/prompts/{{ prompt.id }}" hx-target="#prompt-{{ prompt.id }}" hx-swap="outerHTML"
         hx-disabled-elt="button">
     <div class="muted" style="font-size:.75rem; margin:0 0 10px;">
@@ -13,22 +13,23 @@
 
     <div class="field">
       <label>Prompt-Text</label>
-      <textarea name="content" rows="6" 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;">{{ prompt.content }}</textarea>
+      <textarea name="content" rows="12" 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;">{{ prompt.content }}</textarea>
     </div>
 
-    <div class="field">
-      <label>Kategorie</label>
-      <input type="text" name="category" value="{{ prompt.category }}"
-             list="prompt-cats-{{ prompt.id }}" placeholder="wählen oder neu eingeben"
-             autocomplete="off">
-      <datalist id="prompt-cats-{{ prompt.id }}">
-        {% for name in all_categories %}<option value="{{ name }}"></option>{% endfor %}
-      </datalist>
-    </div>
-
-    <div class="field">
-      <label>Tags (mit Komma getrennt)</label>
-      <input type="text" name="tags" value="{{ prompt.tag_list | join(', ') }}">
+    <div style="display:flex; gap:12px; flex-wrap:wrap;">
+      <div class="field" style="flex:1 1 200px;">
+        <label>Kategorie</label>
+        <input type="text" name="category" value="{{ prompt.category }}"
+               list="prompt-cats-{{ prompt.id }}" placeholder="wählen oder neu eingeben"
+               autocomplete="off">
+        <datalist id="prompt-cats-{{ prompt.id }}">
+          {% for name in all_categories %}<option value="{{ name }}"></option>{% endfor %}
+        </datalist>
+      </div>
+      <div class="field" style="flex:2 1 300px;">
+        <label>Tags (mit Komma getrennt)</label>
+        <input type="text" name="tags" value="{{ prompt.tag_list | join(', ') }}">
+      </div>
     </div>
 
     <div style="display:flex; justify-content:space-between; gap:8px; margin-top:4px; flex-wrap:wrap;">
diff --git a/app/templates/base.html b/app/templates/base.html
index d63f294..bff1e93 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -93,6 +93,8 @@
     #links, #prompts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
     #links > .panel, #prompts > .panel { margin-bottom: 0; }
     #links > #empty-state, #prompts > #empty-state { grid-column: 1 / -1; }
+    /* Beim Bearbeiten mehr Platz geben: Karte spannt über alle Spalten. */
+    .card-edit-wide { grid-column: 1 / -1; }
 
     .link-card { display: flex; flex-direction: column; }
     .link-card.needs-review { border-color: #ca8a04; }