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
This commit is contained in:
Jeffrey Paul 2026-01-01 06:48:06 -08:00
parent c01bfcc9a9
commit ba4893a98a

View File

@ -68,20 +68,11 @@
</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"/>
</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>
<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" title="Download logs">
<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>
@ -89,6 +80,10 @@
</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>
{{end}}