Tags page: no nested scroll areas on phones

The spool list (max 560 px) and the command textarea scrolled on their own;
on iOS a swipe inside them did not move the page, so the bottom of the
page could not be reached. On phones the list now grows with the page and
the textarea is sized to its content.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014GcEk5tkfFSYD6NTF66NkC

app/templates/tags.html

@@ -16,7 +16,8 @@
 .palette button[aria-pressed=true] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
 .cmd { background: var(--hero); color: var(--hero-ink); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
 .cmd .label { color: var(--hero-muted); }
-.cmd textarea { background: transparent; border: 0; color: #D6DCE5; padding: 0; min-height: 0; resize: none; line-height: 1.6; font-size: 12px; word-break: break-all; }
+.cmd textarea { background: transparent; border: 0; color: #D6DCE5; padding: 0; min-height: 0; resize: none; line-height: 1.6; font-size: 12px; word-break: break-all;
+  overflow: hidden; }
 .cmd .acts { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
 .cmd .acts button { min-height: 48px; }
 .cmd .primary { background: var(--hero-accent); border-color: var(--hero-accent); color: #0B1230; font-weight: 800; }
@@ -31,6 +32,8 @@ details[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px
 .radio input { width: 20px; min-height: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 20px; }
 .steps { margin: 0; padding-left: 20px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
 @media (max-width: 999px) {
+  /* no scroll areas inside the page on phones: a swipe there would not move the page */
+  .spools { max-height: none; overflow: visible; }
   .tg.picked .picker .listcard { display: none; }
   .tg.picked .chosen { display: flex; }
 }
@@ -188,6 +191,13 @@ function pick(id) {
 }
 function unpick() { $('tg').classList.remove('picked'); $('filter').focus(); }
 
+function fitCommands() {
+  const ta = $('commands');
+  ta.style.height = 'auto';
+  ta.style.height = ta.scrollHeight + 'px';
+}
+window.addEventListener('resize', fitCommands);
+
 function schedule() { clearTimeout(timer); timer = setTimeout(generate, 250); }
 
 function toggleQR() {
@@ -209,6 +219,7 @@ async function generate() {
     const r = await api('POST', '/api/tag', body);
     $('tagerror').innerHTML = '';
     $('commands').value = r.commands;
+    fitCommands();
     $('pages').textContent = r.commands.split(',').length + ' Seiten';
     $('qr').innerHTML = r.qr_svg;
     const d = r.decoded;