From d828a6be08803232d033de8c7e7092932bd82516 Mon Sep 17 00:00:00 2001
From: pptx704 <rafeed@omukk.dev>
Date: Mon, 13 Apr 2026 04:59:40 +0600
Subject: [PATCH] Normalize dashboard page headers: add divider line and align
 button layout

Add consistent mt-6 border-b divider to Capsules, Metrics, and Templates
headers. Align Channels header to match Keys page pattern (items-center,
description inside the title group).
---
 .../routes/dashboard/capsules/+layout.svelte  |  4 ++-
 .../routes/dashboard/channels/+page.svelte    | 26 ++++++++++---------
 .../src/routes/dashboard/metrics/+page.svelte |  2 ++
 .../routes/dashboard/templates/+page.svelte   |  2 +-
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/frontend/src/routes/dashboard/capsules/+layout.svelte b/frontend/src/routes/dashboard/capsules/+layout.svelte
index c9a2880..0906154 100644
--- a/frontend/src/routes/dashboard/capsules/+layout.svelte
+++ b/frontend/src/routes/dashboard/capsules/+layout.svelte
@@ -44,7 +44,7 @@
 				</div>
 			{:else}
 				<!-- Default list header -->
-				<div class="px-7 pt-8 pb-6">
+				<div class="px-7 pt-8">
 					<div class="flex items-center justify-between">
 						<div>
 							<h1 class="font-serif text-page tracking-[-0.02em] text-[var(--color-text-bright)]">
@@ -70,6 +70,8 @@
 							</div>
 						</div>
 					</div>
+
+					<div class="mt-6 border-b border-[var(--color-border)]"></div>
 				</div>
 			{/if}
 
diff --git a/frontend/src/routes/dashboard/channels/+page.svelte b/frontend/src/routes/dashboard/channels/+page.svelte
index 08b8c82..765180c 100644
--- a/frontend/src/routes/dashboard/channels/+page.svelte
+++ b/frontend/src/routes/dashboard/channels/+page.svelte
@@ -352,14 +352,19 @@
 		<main class="flex-1 overflow-y-auto bg-[var(--color-bg-0)]">
 			<!-- Header -->
 			<div class="px-7 pt-8">
-				<div class="flex items-start justify-between">
-					<div class="flex items-baseline gap-4">
-						<h1 class="font-serif text-page tracking-[-0.02em] text-[var(--color-text-bright)]">
-							Channels
-						</h1>
-						{#if !loading && channels.length > 0}
-							<span class="font-serif text-[1.75rem] tracking-[-0.03em] text-[var(--color-text-muted)]">{channels.length}</span>
-						{/if}
+				<div class="flex items-center justify-between">
+					<div>
+						<div class="flex items-baseline gap-4">
+							<h1 class="font-serif text-page tracking-[-0.02em] text-[var(--color-text-bright)]">
+								Channels
+							</h1>
+							{#if !loading && channels.length > 0}
+								<span class="font-serif text-[1.75rem] tracking-[-0.03em] text-[var(--color-text-muted)]">{channels.length}</span>
+							{/if}
+						</div>
+						<p class="mt-2 text-ui text-[var(--color-text-secondary)]">
+							Route capsule events to Discord, Slack, Telegram, and other destinations.
+						</p>
 					</div>
 
 					<button
@@ -372,11 +377,8 @@
 						New Channel
 					</button>
 				</div>
-				<p class="mt-2 text-ui text-[var(--color-text-secondary)]">
-					Route capsule events to Discord, Slack, Telegram, and other destinations.
-				</p>
 
-				<div class="mt-5 border-b border-[var(--color-border)]"></div>
+				<div class="mt-6 border-b border-[var(--color-border)]"></div>
 			</div>
 
 			<!-- Content -->
diff --git a/frontend/src/routes/dashboard/metrics/+page.svelte b/frontend/src/routes/dashboard/metrics/+page.svelte
index 271c757..3b9fd73 100644
--- a/frontend/src/routes/dashboard/metrics/+page.svelte
+++ b/frontend/src/routes/dashboard/metrics/+page.svelte
@@ -29,6 +29,8 @@
 				<p class="mt-2 text-ui text-[var(--color-text-secondary)]">
 					Resource usage and performance across all capsules.
 				</p>
+
+				<div class="mt-6 border-b border-[var(--color-border)]"></div>
 			</div>
 
 			<StatsPanel
diff --git a/frontend/src/routes/dashboard/templates/+page.svelte b/frontend/src/routes/dashboard/templates/+page.svelte
index 155394f..7c22a7c 100644
--- a/frontend/src/routes/dashboard/templates/+page.svelte
+++ b/frontend/src/routes/dashboard/templates/+page.svelte
@@ -175,7 +175,7 @@
 				</div>
 
 				<!-- Page-level tabs -->
-				<div class="mt-5 flex gap-0 border-b border-[var(--color-border)]">
+				<div class="mt-6 flex gap-0 border-b border-[var(--color-border)]">
 					<!-- Snapshots tab (active) -->
 					<button
 						onclick={() => (pageTab = 'snapshots')}