Buchansicht: Textdiagramme auf schmalen Bildschirmen auf die Blockbreite verkleinern statt abschneiden

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

frontend/src/markdown.js

@@ -51,7 +51,10 @@ const md = new MarkdownIt({
   typographer: false,
   highlight(code, lang) {
     // Textdiagramme (Kästen und Pfeile) bleiben unformatiert und werden nie umgebrochen.
-    if (lang === 'diagramm') return `<pre class="diagramm"><code>${md.utils.escapeHtml(code)}</code></pre>`
+    if (lang === 'diagramm') {
+      const n = Math.max(...code.split('\n').map((z) => z.length))
+      return `<pre class="diagramm" style="--n:${n}"><code>${md.utils.escapeHtml(code)}</code></pre>`
+    }
     const l = lang && hljs.getLanguage(lang) ? lang : null
     const out = l ? hljs.highlight(code, { language: l }).value : md.utils.escapeHtml(code)
     return `<pre class="hljs"><code>${out}</code></pre>`

frontend/src/style.css

@@ -178,7 +178,9 @@ a.knopf { display: inline-block; text-decoration: none; line-height: normal; }
 .buch p, .buch li { overflow-wrap: anywhere; }
 .buch pre { background: var(--code-bg); color: var(--code-fg); padding: 12px 14px; border-radius: 8px; font-size: 0.86em; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; hyphens: manual; }
 .buch pre code { background: none; padding: 0; }
-.buch pre.diagramm, .lm-screen pre.diagramm { white-space: pre; overflow-x: auto; font-size: 0.8em; line-height: 1.2; }
+.buch pre.diagramm, .lm-screen pre.diagramm { white-space: pre; overflow-x: auto; font-size: 0.8em; line-height: 1.2; container-type: inline-size; }
+/* Schmale Bildschirme: die breiteste Zeile (--n Zeichen) soll in den Block passen; unter 8 px wird gescrollt. */
+.buch pre.diagramm code, .lm-screen pre.diagramm code { font-size: clamp(8px, calc(100cqw / var(--n) / 0.61), 0.86em); }
 .buch table { border-collapse: collapse; margin: 0 0 1em; font-size: 0.92em; display: block; max-width: 100%; overflow-x: auto; hyphens: manual; }
 .buch th, .buch td { border: 1px solid var(--lese-rand); padding: 4px 9px; text-align: left; }
 .buch .hinweis { background: var(--karte); border-radius: 6px; padding: 8px 12px; font-size: 0.85rem; color: var(--dim); font-family: system-ui, sans-serif; margin: 0 0 14px; }