style(workflows): stack the lane pipeline and skill usage panels

Both panels carry wide tables that were fighting for half a row on lg
screens. Each gets its own full-width row instead.
This commit is contained in:
2026-09-08 11:27:43 +07:00
parent fe45644b31
commit bede2b5813
2 changed files with 133 additions and 138 deletions
@@ -10351,153 +10351,149 @@ exports[`screen snapshots > Workflows 1`] = `
</div>
</div>
<div
class="grid grid-cols-1 lg:grid-cols-2 gap-6"
class="flex flex-col h-full"
>
<div
class="flex flex-col h-full"
class="flex items-center justify-between gap-4 mb-3"
>
<div
class="flex items-center justify-between gap-4 mb-3"
class="flex items-center gap-2.5 min-w-0"
>
<div
class="flex items-center gap-2.5 min-w-0"
>
<span
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
>
1
</span>
<h2
class="text-sm font-semibold text-fg-primary"
>
Lane Pipeline Pass Rates
</h2>
<button
aria-expanded="false"
aria-label="What this shows"
class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
type="button"
>
<svg
class="lucide lucide-info w-3.5 h-3.5"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
<path
d="M12 16v-4"
/>
<path
d="M12 8h.01"
/>
</svg>
</button>
</div>
<span
class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
title="How often each stage of your own pipelines is actually passed"
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
>
How often each stage of your own pipelines is actually passed
1
</span>
</div>
<div
class="card p-4 flex-1"
>
<div
class="space-y-3"
<h2
class="text-sm font-semibold text-fg-primary"
>
<p
class="text-sm text-fg-muted"
Lane Pipeline Pass Rates
</h2>
<button
aria-expanded="false"
aria-label="What this shows"
class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
type="button"
>
<svg
class="lucide lucide-info w-3.5 h-3.5"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
No lane has recorded a stage yet. Create one with
<code>
agenthub lanes add --cwd $(pwd)
</code>
</p>
</div>
<circle
cx="12"
cy="12"
r="10"
/>
<path
d="M12 16v-4"
/>
<path
d="M12 8h.01"
/>
</svg>
</button>
</div>
<span
class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
title="How often each stage of your own pipelines is actually passed"
>
How often each stage of your own pipelines is actually passed
</span>
</div>
<div
class="flex flex-col h-full"
class="card p-4 flex-1"
>
<div
class="flex items-center justify-between gap-4 mb-3"
>
<div
class="flex items-center gap-2.5 min-w-0"
>
<span
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
>
2
</span>
<h2
class="text-sm font-semibold text-fg-primary"
>
Skill & Plugin Usage
</h2>
<button
aria-expanded="false"
aria-label="What this shows"
class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
type="button"
>
<svg
class="lucide lucide-info w-3.5 h-3.5"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
<path
d="M12 16v-4"
/>
<path
d="M12 8h.01"
/>
</svg>
</button>
</div>
<span
class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
title="Which skills your sessions actually reach for"
>
Which skills your sessions actually reach for
</span>
</div>
<div
class="card p-4 flex-1"
class="space-y-3"
>
<p
class="text-sm text-fg-muted"
>
No skill invocation recorded yet.
No lane has recorded a stage yet. Create one with
<code>
agenthub lanes add --cwd $(pwd)
</code>
</p>
</div>
</div>
</div>
<div
class="flex flex-col h-full"
>
<div
class="flex items-center justify-between gap-4 mb-3"
>
<div
class="flex items-center gap-2.5 min-w-0"
>
<span
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
>
2
</span>
<h2
class="text-sm font-semibold text-fg-primary"
>
Skill & Plugin Usage
</h2>
<button
aria-expanded="false"
aria-label="What this shows"
class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
type="button"
>
<svg
class="lucide lucide-info w-3.5 h-3.5"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
<path
d="M12 16v-4"
/>
<path
d="M12 8h.01"
/>
</svg>
</button>
</div>
<span
class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
title="Which skills your sessions actually reach for"
>
Which skills your sessions actually reach for
</span>
</div>
<div
class="card p-4 flex-1"
>
<p
class="text-sm text-fg-muted"
>
No skill invocation recorded yet.
</p>
</div>
</div>
<div
class="card p-4 space-y-3"
>