diff --git a/backend/static/style.css b/backend/static/style.css index c385c49..f7d2f93 100644 --- a/backend/static/style.css +++ b/backend/static/style.css @@ -131,10 +131,19 @@ button, .primary, [role="tab"] { .search:focus-visible { outline: 2px solid var(--accent); } -.tabs { display: flex; gap: 8px; margin-bottom: 16px; } +/* Five buttons no longer divide a phone's width legibly, so the row scrolls + sideways instead of squeezing. The scrollbar is hidden: on mobile there is + none anyway, and on desktop it would sit under the tab labels. */ +.tabs { + display: flex; gap: 8px; margin-bottom: 16px; + overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; +} +.tabs::-webkit-scrollbar { display: none; } .tabs [role="tab"] { - flex: 1; + flex: 1 0 auto; + padding-inline: 14px; + white-space: nowrap; display: grid; place-items: center; background: var(--surface); diff --git a/backend/templates/app.html b/backend/templates/app.html index dcbaed4..1726355 100644 --- a/backend/templates/app.html +++ b/backend/templates/app.html @@ -31,6 +31,12 @@ Favourites + Archived + Finished {{if .Recent}} diff --git a/backend/templates/card.html b/backend/templates/card.html index 8278ca9..63293b8 100644 --- a/backend/templates/card.html +++ b/backend/templates/card.html @@ -38,6 +38,48 @@ + {{if eq .Status "finished"}} + + {{else}} + {{if eq .Status "archived"}} + + {{else}} + + {{end}} + + {{end}}