Skip to content

Commit 7e6baa8

Browse files
vector76vector76
committed
Fix dashboard mobile display
Add viewport meta tag to both dashboard and bead-detail templates so mobile browsers render at device width instead of desktop width. Wrap all tables in overflow-x:auto containers for horizontal scrolling on narrow screens. Reduce body margin from 2em to 0.75em on screens <=600px via media query. Built with Raymond (Agent Orchestrator)
1 parent 99ad7b3 commit 7e6baa8

1 file changed

Lines changed: 18 additions & 12 deletions

File tree

‎internal/server/dashboard.go‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@ var dashboardTmpl = template.Must(template.New("dashboard").Funcs(template.FuncM
130130
<html{{if .Theme}} data-theme="{{.Theme}}"{{end}}>
131131
<head>
132132
<meta charset="utf-8">
133+
<meta name="viewport" content="width=device-width, initial-scale=1">
133134
<title>Beads Dashboard</title>
134135
<style>
135136
:root {
@@ -162,9 +163,11 @@ var dashboardTmpl = template.Must(template.New("dashboard").Funcs(template.FuncM
162163
h1 { margin-bottom: 0.2em; }
163164
h2 { border-bottom: 1px solid var(--color-border-subtle); padding-bottom: 0.2em; }
164165
h3 { margin-top: 1.2em; }
166+
.table-wrap { overflow-x: auto; }
165167
table { border-collapse: collapse; width: 100%; margin-bottom: 1em; }
166168
th, td { text-align: left; padding: 0.35em 0.7em; border: 1px solid var(--color-border); }
167169
th { background: var(--color-bg-header); }
170+
@media (max-width: 600px) { body { margin: 0.75em; } }
168171
.counts { display: flex; gap: 0.8em; flex-wrap: wrap; }
169172
.counts div { padding: 0.3em 0.7em; border-radius: 4px; background: var(--color-bg-badge); font-size: 0.9em; }
170173
.counts div.badge-yellow { background: var(--color-bg-badge-yellow); }
@@ -195,34 +198,34 @@ var dashboardTmpl = template.Must(template.New("dashboard").Funcs(template.FuncM
195198
196199
{{if .NotReady}}
197200
<h3>Not Ready</h3>
198-
<table>
201+
<div class="table-wrap"><table>
199202
<tr><th style="width:1.5em"></th><th>ID</th><th>Title</th><th>Priority</th><th>Type</th><th>Updated</th></tr>
200203
{{range .NotReady}}<tr><td>{{if .Blocked}}🔒{{end}}</td><td><a href="/bead/{{$proj}}/{{.ID}}">{{.ID}}</a></td><td>{{.Title}}</td><td>{{.Priority}}</td><td>{{.Type}}</td><td>{{fmtTime .UpdatedAt}}</td></tr>
201-
{{end}}</table>
204+
{{end}}</table></div>
202205
{{end}}
203206
204207
{{if .InProgress}}
205208
<h3>In Progress</h3>
206-
<table>
209+
<div class="table-wrap"><table>
207210
<tr><th>ID</th><th>Title</th><th>Assignee</th><th>Priority</th><th>Updated</th></tr>
208211
{{range .InProgress}}<tr><td><a href="/bead/{{$proj}}/{{.ID}}">{{.ID}}</a></td><td>{{.Title}}</td><td>{{.Assignee}}</td><td>{{.Priority}}</td><td>{{fmtTime .UpdatedAt}}</td></tr>
209-
{{end}}</table>
212+
{{end}}</table></div>
210213
{{end}}
211214
212215
{{if .Open}}
213216
<h3>Open</h3>
214-
<table>
217+
<div class="table-wrap"><table>
215218
<tr><th style="width:1.5em"></th><th>ID</th><th>Title</th><th>Priority</th><th>Type</th><th>Updated</th></tr>
216219
{{range .Open}}<tr><td>{{if .Blocked}}🔒{{end}}</td><td><a href="/bead/{{$proj}}/{{.ID}}">{{.ID}}</a></td><td>{{.Title}}</td><td>{{.Priority}}</td><td>{{.Type}}</td><td>{{fmtTime .UpdatedAt}}</td></tr>
217-
{{end}}</table>
220+
{{end}}</table></div>
218221
{{end}}
219222
220223
{{if .Closed}}
221224
<h3>Closed ({{len .Closed}})</h3>
222-
<table>
225+
<div class="table-wrap"><table>
223226
<tr><th>ID</th><th>Title</th><th>Priority</th><th>Updated</th></tr>
224227
{{range .Closed}}<tr><td><a href="/bead/{{$proj}}/{{.ID}}">{{.ID}}</a></td><td>{{.Title}}</td><td>{{.Priority}}</td><td>{{fmtTime .UpdatedAt}}</td></tr>
225-
{{end}}</table>
228+
{{end}}</table></div>
226229
{{end}}
227230
228231
</details>
@@ -279,6 +282,7 @@ var beadDetailTmpl = template.Must(template.New("bead-detail").Funcs(template.Fu
279282
<html{{if .Theme}} data-theme="{{.Theme}}"{{end}}>
280283
<head>
281284
<meta charset="utf-8">
285+
<meta name="viewport" content="width=device-width, initial-scale=1">
282286
<title>{{.Bead.ID}} — {{.Bead.Title}}</title>
283287
<style>
284288
:root {
@@ -314,9 +318,11 @@ var beadDetailTmpl = template.Must(template.New("bead-detail").Funcs(template.Fu
314318
.meta div { padding: 0.4em 0.8em; border-radius: 4px; background: var(--color-bg-badge); }
315319
.description { background: var(--color-bg-subtle); border: 1px solid var(--color-border-light); padding: 1em; border-radius: 4px; margin-bottom: 1em; }
316320
.tags span { display: inline-block; background: var(--color-bg-tag); padding: 0.2em 0.6em; border-radius: 3px; margin-right: 0.4em; font-size: 0.9em; }
321+
.table-wrap { overflow-x: auto; }
317322
table { border-collapse: collapse; width: 100%; margin-bottom: 1em; }
318323
th, td { text-align: left; padding: 0.35em 0.7em; border: 1px solid var(--color-border); }
319324
th { background: var(--color-bg-header); }
325+
@media (max-width: 600px) { body { margin: 0.75em; } }
320326
.comment { border: 1px solid var(--color-border-light); padding: 0.8em; margin-bottom: 0.5em; border-radius: 4px; }
321327
.comment-meta { font-size: 0.85em; color: var(--color-text-secondary); margin-bottom: 0.3em; }
322328
.comment-text { white-space: pre-wrap; }
@@ -356,20 +362,20 @@ var beadDetailTmpl = template.Must(template.New("bead-detail").Funcs(template.Fu
356362
{{if .ActiveBlockers}}
357363
<div class="section">
358364
<h3>Blocked By (Active)</h3>
359-
<table>
365+
<div class="table-wrap"><table>
360366
<tr><th>ID</th><th>Title</th><th>Status</th><th>Priority</th></tr>
361367
{{range .ActiveBlockers}}<tr><td><a href="/bead/{{$.Project}}/{{.ID}}">{{.ID}}</a></td><td>{{.Title}}</td><td>{{.Status}}</td><td>{{.Priority}}</td></tr>
362-
{{end}}</table>
368+
{{end}}</table></div>
363369
</div>
364370
{{end}}
365371
366372
{{if .ResolvedBlockers}}
367373
<div class="section">
368374
<h3>Blocked By (Resolved)</h3>
369-
<table>
375+
<div class="table-wrap"><table>
370376
<tr><th>ID</th><th>Title</th><th>Status</th><th>Priority</th></tr>
371377
{{range .ResolvedBlockers}}<tr><td><a href="/bead/{{$.Project}}/{{.ID}}">{{.ID}}</a></td><td>{{.Title}}</td><td>{{.Status}}</td><td>{{.Priority}}</td></tr>
372-
{{end}}</table>
378+
{{end}}</table></div>
373379
</div>
374380
{{end}}
375381

0 commit comments

Comments
 (0)