From 37457c091baaa888cfcba8ebe76dd992756b5dd4 Mon Sep 17 00:00:00 2001
From: ChK <ckendel@gmail.com>
Date: Sun, 5 Apr 2026 17:23:28 +0200
Subject: [PATCH] desgin hoehen

---
 public/client.js  | 38 ++++++++++++++++++++++++++++++++++++++
 public/styles.css | 13 +++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/public/client.js b/public/client.js
index b46d94c..4b4124a 100755
--- a/public/client.js
+++ b/public/client.js
@@ -238,6 +238,44 @@ function setupUi() {
     if (btn.id === "btn-calculate") return;
     btn.addEventListener("click", () => onCommandClick(btn));
   });
+
+  // ===== SECTION COLLAPSE/EXPAND =====
+  document.querySelectorAll(".section h2").forEach(heading => {
+    heading.addEventListener("click", () => {
+      const section = heading.closest(".section");
+      if (section) {
+        section.classList.toggle("collapsed");
+      }
+    });
+    heading.style.cursor = "pointer";
+  });
+
+  // Auto-expand when content is written to a collapsed section
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === "childList" || mutation.type === "characterData") {
+        let el = mutation.target;
+        while (el && el !== document.body) {
+          const section = el.closest(".section");
+          if (section && section.classList.contains("collapsed")) {
+            section.classList.remove("collapsed");
+            break;
+          }
+          el = el.parentElement;
+        }
+      }
+    });
+  });
+
+  // Observer auf alle Elemente in Sections anwenden
+  document.querySelectorAll(".section").forEach(section => {
+    observer.observe(section, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      characterDataOldValue: false
+    });
+  });
 }
 
 window.addEventListener("DOMContentLoaded", setupUi);
\ No newline at end of file
diff --git a/public/styles.css b/public/styles.css
index 9deeff5..87f74bc 100755
--- a/public/styles.css
+++ b/public/styles.css
@@ -138,6 +138,13 @@ textarea {
   font-size: 12px;
 }
 
+/* Ausgabe / Log: nur wenige Zeilen */
+#log {
+  min-height: 60px;
+  max-height: 150px;
+  resize: vertical;
+}
+
 /* ===== PANEL (alte Struktur wiederhergestellt) ===== */
 
 .panel {
@@ -211,4 +218,10 @@ textarea {
 
 #snapshot-table tbody tr:hover {
   background: #1e293b;
+}
+
+/* ===== SNAPSHOT PICTURES ===== */
+
+#snapshot-info-picture {
+  margin-top: 10px;
 }
\ No newline at end of file