From 60d583e66e2f43132f2b9f5dae2800aae4ee84b7 Mon Sep 17 00:00:00 2001
From: Jonas Menzel <jonasmenzel2012@googlemail.com>
Date: Sun, 25 Oct 2026 20:08:40 +0100
Subject: [PATCH] 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 | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/templates/tags.html b/app/templates/tags.html
index 2b758a9..a104baf 100644
--- a/app/templates/tags.html
+++ b/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;