feat(web): archived and finished tabs with per-card status controls

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);