From 392028a9aab2a5c08d459e08c548b7057f5349ed Mon Sep 17 00:00:00 2001
From: UserIsMH <momohomma@googlemail.com>
Date: Fri, 1 May 2026 14:35:13 +0200
Subject: [PATCH] Analysepipeline: kompakter Reihenwechsel-Pfeil statt langem
 Bogen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der U-Turn-Bogen, der quer ueber die ganze Box-Breite lief, wirkte bei
nur drei Bloecken pro Reihe optisch ueberladen. Jetzt sitzt unter dem
letzten Block der oberen Reihe ein schlichter, kurzer Pfeil nach unten,
der direkt zum ersten Block der naechsten Reihe zeigt.

- pipeline.js: Neue _renderUturn-Variante, die Spacer (Block-Breite)
  vor oder hinter den Pfeil setzt, sodass er passgenau unter dem letzten
  Block sitzt (rechts nach ltr-Reihe, links nach rtl-Reihe).
- style.css: Pfeil-Container nutzt Flex mit Block-Breite-Spacern statt
  100%-breitem SVG. Kurzer ↓ als gerader Pfad mit Pfeilkopf,
  is-flowing-Animation bleibt erhalten.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/static/css/style.css  | 32 ++++++++++++++++++--------------
 src/static/js/pipeline.js | 24 +++++++++++-------------
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/static/css/style.css b/src/static/css/style.css
index 0c55026..ff90f9c 100644
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@@ -5827,25 +5827,29 @@ body.tutorial-active .tutorial-cursor {
     to   { background-position: 0 0; }
 }
 
-/* U-Turn-Pfeil zwischen Snake-Reihen */
+/* Reihenwechsel-Pfeil (kompakter ↓ direkt unter dem letzten Block) */
 .pipeline-uturn {
-    height: 36px;
+    display: flex;
+    gap: var(--sp-md);
+    align-items: stretch;
+    height: 32px;
     width: 100%;
     margin: var(--sp-xs) 0;
     pointer-events: none;
-    overflow: visible;
 }
-.pipeline-uturn svg {
-    width: 100%;
+.uturn-spacer { flex: 0 0 168px; }
+.uturn-arrow {
+    flex: 0 0 168px;
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+}
+.uturn-arrow svg {
+    width: 24px;
     height: 100%;
     overflow: visible;
 }
-.pipeline-uturn-path {
-    fill: none;
-    stroke: var(--border);
-    stroke-width: 2;
-    stroke-linecap: round;
-}
+.pipeline-uturn-path,
 .pipeline-uturn-head {
     fill: none;
     stroke: var(--border);
@@ -5855,12 +5859,12 @@ body.tutorial-active .tutorial-cursor {
 }
 .pipeline-uturn.is-flowing .pipeline-uturn-path {
     stroke: var(--accent);
-    stroke-dasharray: 8 6;
-    animation: pipelineUturnDash 0.9s linear infinite;
+    stroke-dasharray: 6 4;
+    animation: pipelineUturnDash 0.7s linear infinite;
 }
 .pipeline-uturn.is-flowing .pipeline-uturn-head { stroke: var(--accent); }
 @keyframes pipelineUturnDash {
-    to { stroke-dashoffset: -28; }
+    to { stroke-dashoffset: -20; }
 }
 
 .pipeline-loop {
diff --git a/src/static/js/pipeline.js b/src/static/js/pipeline.js
index 2b997ec..0f3551b 100644
--- a/src/static/js/pipeline.js
+++ b/src/static/js/pipeline.js
@@ -246,22 +246,20 @@ const Pipeline = {
         `;
     },
 
-    /** U-Turn-Pfeil zwischen zwei Reihen (Snake-Übergang). */
+    /** Kompakter Reihenwechsel-Pfeil: kurzer ↓ direkt unter dem letzten Block der oberen Reihe. */
     _renderUturn(side, fromKey) {
-        // SVG-Bogen + Pfeilkopf, side="right" startet rechts oben, "left" startet links oben.
-        // viewBox: 100 wide, 44 high
-        const path = side === 'right'
-            ? 'M 92 0 L 92 18 A 14 14 0 0 1 78 32 L 8 32'
-            : 'M 8 0 L 8 18 A 14 14 0 0 0 22 32 L 92 32';
-        const head = side === 'right'
-            ? '<polyline points="14,26 8,32 14,38"/>'
-            : '<polyline points="86,26 92,32 86,38"/>';
+        const arrowSvg = `
+            <div class="uturn-arrow">
+                <svg viewBox="0 0 24 32" preserveAspectRatio="xMidYMid meet">
+                    <path d="M 12 2 L 12 24" class="pipeline-uturn-path"/>
+                    <polyline points="6,18 12,24 18,18" class="pipeline-uturn-head"/>
+                </svg>
+            </div>`;
+        const spacers = '<span class="uturn-spacer"></span><span class="uturn-spacer"></span>';
+        const inner = side === 'right' ? (spacers + arrowSvg) : (arrowSvg + spacers);
         return `
             <div class="pipeline-uturn" data-side="${side}" data-from="${fromKey}" data-arrow-type="uturn" aria-hidden="true">
-                <svg viewBox="0 0 100 44" preserveAspectRatio="none">
-                    <path d="${path}" class="pipeline-uturn-path"/>
-                    <g class="pipeline-uturn-head">${head}</g>
-                </svg>
+                ${inner}
             </div>
         `;
     },