From ba4893a98a21dfeae8e1976bdd4519d4b8f727c4 Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Thu, 1 Jan 2026 06:48:06 -0800
Subject: [PATCH] Simplify logs pane structure to fix scrolling

- Remove details/summary element that may have caused layout issues
- Use simpler layout with header row and logs block below
- Change overflow-auto to overflow-y-scroll to force scrollbar
- Add break-all to handle long lines
---
 templates/deployments.html | 33 ++++++++++++++-------------------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/templates/deployments.html b/templates/deployments.html
index 1246b91..4b8295f 100644
--- a/templates/deployments.html
+++ b/templates/deployments.html
@@ -68,26 +68,21 @@
             </div>
 
             {{if or .Logs.Valid (eq .Status "building") (eq .Status "deploying")}}
-            <div class="mt-4 flex items-center gap-4">
-                <details class="deployment-logs flex-1" {{if or (eq .Status "building") (eq .Status "deploying")}}open{{end}}>
-                    <summary class="cursor-pointer text-sm text-primary-600 hover:text-primary-800 font-medium inline-flex items-center">
-                        <svg class="w-4 h-4 mr-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+            <div class="mt-4">
+                <div class="flex items-start gap-4 mb-2">
+                    <span class="cursor-pointer text-sm text-primary-600 hover:text-primary-800 font-medium">Build Logs</span>
+                    {{if or (eq .Status "success") (eq .Status "failed")}}
+                    <a href="/apps/{{$.App.ID}}/deployments/{{.ID}}/download" class="text-sm text-primary-600 hover:text-primary-800 inline-flex items-center ml-auto" title="Download logs">
+                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                         </svg>
-                        View Logs
-                    </summary>
-                    <div class="logs-wrapper mt-3 bg-gray-900 rounded-lg p-4 overflow-auto" style="max-height: 400px;">
-                        <pre class="logs-content text-gray-100 text-xs font-mono leading-relaxed whitespace-pre-wrap">{{if .Logs.Valid}}{{.Logs.String}}{{else}}Loading...{{end}}</pre>
-                    </div>
-                </details>
-                {{if or (eq .Status "success") (eq .Status "failed")}}
-                <a href="/apps/{{$.App.ID}}/deployments/{{.ID}}/download" class="text-sm text-primary-600 hover:text-primary-800 inline-flex items-center" title="Download logs">
-                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
-                    </svg>
-                    Download
-                </a>
-                {{end}}
+                        Download
+                    </a>
+                    {{end}}
+                </div>
+                <div class="logs-wrapper bg-gray-900 rounded-lg p-4 overflow-y-scroll" style="max-height: 400px;">
+                    <pre class="logs-content text-gray-100 text-xs font-mono leading-relaxed whitespace-pre-wrap break-all">{{if .Logs.Valid}}{{.Logs.String}}{{else}}Loading...{{end}}</pre>
+                </div>
             </div>
             {{end}}
         </div>