From 9ddc7d31bb07d1d09f8818c2edcfc031c6dfb70f Mon Sep 17 00:00:00 2001
From: Sucukdeluxe <Sucukdeluxe@users.noreply.github.com>
Date: Thu, 5 Mar 2026 04:12:47 +0100
Subject: [PATCH] Make update changelog collapsible in confirm dialog

Long changelogs made the update dialog unscrollable, preventing users
from reaching the install button. Changelog is now in a collapsed
<details> element. Dialog also has max-height with overflow scroll.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/App.tsx    | 26 ++++++++++++--------------
 src/renderer/styles.css | 30 ++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index c60221b..605e873 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -36,6 +36,7 @@ interface ConfirmPromptState {
   message: string;
   confirmLabel: string;
   danger?: boolean;
+  details?: string;
 }
 
 interface ContextMenuState {
@@ -990,45 +991,36 @@ export function App(): ReactElement {
       if (source === "manual") { showToast(`Kein Update verfügbar (v${result.currentVersion})`, 2000); }
       return;
     }
-    let changelogBlock = "";
+    let changelogText = "";
     if (result.releaseNotes) {
-      // Build compact changelog: only top-level list items, no sub-items or long descriptions
       const lines = result.releaseNotes.split("\n");
       const compactLines: string[] = [];
       for (const line of lines) {
-        // Skip indented sub-items (2+ spaces before dash)
         if (/^\s{2,}[-*]/.test(line)) continue;
-        // Skip heading markers
         if (/^#{1,6}\s/.test(line)) continue;
-        // Skip empty lines
         if (!line.trim()) continue;
-        // Strip markdown: **bold**, *italic*, `code`
         let clean = line
           .replace(/\*\*([^*]+)\*\*/g, "$1")
           .replace(/\*([^*]+)\*/g, "$1")
           .replace(/`([^`]+)`/g, "$1")
           .replace(/^\s*[-*]\s+/, "- ")
           .trim();
-        // Truncate long lines after the first colon/sentence
         const colonIdx = clean.indexOf(":");
         if (colonIdx > 0 && colonIdx < clean.length - 1) {
           const afterColon = clean.slice(colonIdx + 1).trim();
-          // Keep short descriptions, cut long ones
           if (afterColon.length > 60) {
             clean = clean.slice(0, colonIdx + 1).trim();
           }
         }
         if (clean) compactLines.push(clean);
       }
-      const notes = compactLines.join("\n");
-      if (notes) {
-        changelogBlock = `\n\n--- Changelog ---\n${notes}`;
-      }
+      changelogText = compactLines.join("\n");
     }
     const approved = await askConfirmPrompt({
       title: "Update verfügbar",
-      message: `${result.latestTag} (aktuell v${result.currentVersion})${changelogBlock}\n\nJetzt automatisch herunterladen und installieren?`,
-      confirmLabel: "Jetzt installieren"
+      message: `${result.latestTag} (aktuell v${result.currentVersion})\n\nJetzt automatisch herunterladen und installieren?`,
+      confirmLabel: "Jetzt installieren",
+      details: changelogText || undefined
     });
     if (!mountedRef.current) {
       return;
@@ -2889,6 +2881,12 @@ export function App(): ReactElement {
           <div className="modal-card" onClick={(event) => event.stopPropagation()}>
             <h3>{confirmPrompt.title}</h3>
             <p style={{ whiteSpace: "pre-line" }}>{confirmPrompt.message}</p>
+            {confirmPrompt.details && (
+              <details className="modal-details">
+                <summary>Changelog anzeigen</summary>
+                <pre>{confirmPrompt.details}</pre>
+              </details>
+            )}
             <div className="modal-actions">
               <button className="btn" onClick={() => closeConfirmPrompt(false)}>Abbrechen</button>
               <button
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 5c18553..9b382ce 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -1764,6 +1764,8 @@ td {
 
 .modal-card {
   width: min(560px, 100%);
+  max-height: calc(100vh - 40px);
+  overflow-y: auto;
   border: 1px solid var(--border);
   border-radius: 14px;
   background: linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, transparent), color-mix(in srgb, var(--surface) 98%, transparent));
@@ -1782,6 +1784,34 @@ td {
   color: var(--muted);
 }
 
+.modal-details {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0;
+}
+.modal-details summary {
+  padding: 6px 10px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--muted);
+  user-select: none;
+}
+.modal-details summary:hover {
+  color: var(--text);
+}
+.modal-details pre {
+  margin: 0;
+  padding: 8px 10px;
+  border-top: 1px solid var(--border);
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 260px;
+  overflow-y: auto;
+  color: var(--muted);
+}
+
 .modal-path {
   font-size: 12px;
   word-break: break-all;