From 58710d6ebab7d7f3859496ec0eb56c503401801f Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Mon, 18 May 2026 15:53:51 +0200
Subject: [PATCH] feat(20-03): tablo detail header, metadata row, and tab bar
 CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- .tablo-detail-page outer container with 24px 32px padding
- .tablo-detail-header flex column with border-bottom
- .tablo-detail-title-row flex row for avatar + h1
- .tablo-detail-avatar 48x48 colored circle with border-radius 12px
- .tablo-detail-title at 1.75rem weight 600
- .tablo-metadata-row horizontal flex with gap 24px
- .tablo-meta-segment and .tablo-meta-progress helper rules
- .tablo-progress-bar with background var(--color-brand-primary) — NOT project-color
- .tablo-tab-bar and .tablo-tab-bar .tab-nav-item override
---
 go-backend/internal/web/ui/app.css | 85 ++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)

diff --git a/go-backend/internal/web/ui/app.css b/go-backend/internal/web/ui/app.css
index 1f0173e..4df44fe 100644
--- a/go-backend/internal/web/ui/app.css
+++ b/go-backend/internal/web/ui/app.css
@@ -1947,3 +1947,88 @@ td.text-right .borderless-icon-button.ui-icon-button-ghost.ui-icon-button-danger
 .message-meta .message-author {
   font-weight: 600;
 }
+
+/* === Tablo Detail Page === */
+
+.tablo-detail-page {
+  padding: 24px 32px;
+}
+
+.tablo-detail-header {
+  border-bottom: 1px solid var(--color-border-muted);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding-bottom: 0;
+}
+
+.tablo-detail-title-row {
+  align-items: center;
+  display: flex;
+  gap: 16px;
+  margin-bottom: 0;
+  padding-bottom: 16px;
+}
+
+.tablo-detail-avatar {
+  align-items: center;
+  border-radius: 12px;
+  color: #ffffff;
+  display: flex;
+  flex-shrink: 0;
+  font-size: 1rem;
+  font-weight: 700;
+  height: 48px;
+  justify-content: center;
+  width: 48px;
+}
+
+.tablo-detail-title {
+  color: var(--color-text-primary);
+  font-size: 1.75rem;
+  font-weight: 600;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.tablo-metadata-row {
+  align-items: center;
+  border-bottom: 1px solid var(--color-border-muted);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  padding-block: 16px;
+}
+
+.tablo-meta-segment {
+  align-items: center;
+  color: var(--color-text-secondary);
+  display: flex;
+  font-size: 0.875rem;
+  gap: 8px;
+}
+
+.tablo-meta-progress {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+}
+
+.tablo-progress-bar {
+  background: var(--color-brand-primary);
+  border-radius: 9999px;
+  height: 5px;
+}
+
+.tablo-tab-bar {
+  border-bottom: 1px solid var(--color-border-muted);
+  display: flex;
+  gap: 24px;
+  margin-top: 0;
+  padding-top: 8px;
+}
+
+.tablo-tab-bar .tab-nav-item {
+  font-size: 0.875rem;
+  padding-bottom: 12px;
+}