1
0
forked from wrenn/wrenn

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).
This commit is contained in:
2026-04-13 04:59:40 +06:00
parent bbdb44afee
commit d828a6be08
4 changed files with 20 additions and 14 deletions

View File

@ -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}

View File

@ -352,7 +352,8 @@
<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-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
@ -361,6 +362,10 @@
<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
onclick={() => { showCreate = true; resetCreateForm(); }}
@ -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 -->

View File

@ -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

View File

@ -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')}