1 files changed, 62 insertions, 11 deletions

diff --git a/src/zen/frontend/html/trace.css b/src/zen/frontend/html/trace.css
index 2ff324019..5b9bb28c6 100644
--- a/src/zen/frontend/html/trace.css
+++ b/src/zen/frontend/html/trace.css
@@ -87,18 +87,27 @@ pre, code, .mono {
 
 .header {
 	display: flex;
-	align-items: center;
+	align-items: stretch;
 	gap: 16px;
-	padding: 10px 16px;
+	padding: 0 16px;
 	background: var(--bg1);
 	border-bottom: 1px solid var(--border);
 	flex-shrink: 0;
+	min-height: 40px;
+}
+
+.header > .header-title,
+.header > .header-file,
+.header > .header-stats,
+.header > .header-btn {
+	align-self: center;
 }
 
 .header-title {
 	font-weight: 600;
 	color: var(--fg0);
 	font-size: 14px;
+	white-space: nowrap;
 }
 
 .header-file {
@@ -172,16 +181,19 @@ pre, code, .mono {
 }
 
 /* -- tabs ------------------------------------------------------------------ */
+/* Tabs live inside the header bar at the top, alongside the title / file
+ * path / stats. Each tab is a button that owns its own underline so the
+ * active state aligns flush with the header's bottom border. */
 
 .tabs {
 	display: flex;
-	border-bottom: 1px solid var(--border);
 	flex-shrink: 0;
+	height: 100%;
+	margin-left: -8px;  /* let first tab sit closer to the left edge */
 }
 
 .tab {
-	flex: 1;
-	padding: 10px 8px;
+	padding: 0 14px;
 	background: transparent;
 	border: none;
 	border-bottom: 2px solid transparent;
@@ -191,6 +203,10 @@ pre, code, .mono {
 	cursor: pointer;
 	text-transform: uppercase;
 	letter-spacing: 0.5px;
+	white-space: nowrap;
+	display: flex;
+	align-items: center;
+	margin-bottom: -1px;  /* overlap header's bottom border so the underline sits flush */
 }
 
 .tab:hover {
@@ -1165,7 +1181,7 @@ pre, code, .mono {
 
 .memory-grid {
 	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
+	grid-template-columns: minmax(0, 1fr);
 	gap: 16px;
 }
 
@@ -1173,6 +1189,46 @@ pre, code, .mono {
 	grid-column: 1 / -1;
 }
 
+.memory-tabbed {
+	display: flex;
+	flex-direction: column;
+	gap: 0;
+}
+
+.memory-tab-bar {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	padding: 0 4px;
+	border-bottom: 1px solid var(--border-soft);
+	margin-bottom: -1px;
+}
+
+.memory-tab {
+	padding: 8px 14px;
+	background: transparent;
+	border: none;
+	border-bottom: 2px solid transparent;
+	color: var(--fg2);
+	font-size: 12px;
+	font-weight: 500;
+	cursor: pointer;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	white-space: nowrap;
+	margin-bottom: -1px;
+}
+
+.memory-tab:hover {
+	color: var(--fg0);
+	background: var(--bg2);
+}
+
+.memory-tab.active {
+	color: var(--accent);
+	border-bottom-color: var(--accent);
+}
+
 .memory-table-wrap {
 	overflow: auto;
 	max-height: 360px;
@@ -1305,8 +1361,3 @@ pre, code, .mono {
 	font-size: 12px;
 }
 
-@media (max-width: 1200px) {
-	.memory-grid {
-		grid-template-columns: 1fr;
-	}
-}