From 9643fe519e0490352978c033bb2080d1a9248589 Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Sat, 25 Apr 2026 02:58:58 +0300 Subject: [PATCH] feat(redesign): stack PageHeader meter top-right, button bottom-right MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The hero's right column now spreads vertically — count + label pinned at the top, action button(s) flushed to the bottom-right corner of the card via margin-top: auto. Row uses align-items: stretch so the side column reaches the full hero height regardless of how tall the left column gets (long descriptions, many pills, etc.). Single CSS change in the shared component, so it applies to every page that uses PageHeader (all 14 of them) — no per-page edits. --- frontend/src/lib/components/PageHeader.svelte | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/frontend/src/lib/components/PageHeader.svelte b/frontend/src/lib/components/PageHeader.svelte index 386cc5d..6d128ac 100644 --- a/frontend/src/lib/components/PageHeader.svelte +++ b/frontend/src/lib/components/PageHeader.svelte @@ -112,10 +112,11 @@ position: relative; z-index: 1; display: flex; - align-items: flex-start; + align-items: stretch; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; + min-height: 100%; } .subpage-hero__main { min-width: 0; flex: 1; } @@ -177,8 +178,8 @@ .subpage-hero__side { display: flex; - align-items: center; - gap: 1.25rem; + flex-direction: column; + align-items: flex-end; flex-shrink: 0; } .subpage-hero__meter { @@ -188,6 +189,13 @@ align-items: flex-end; justify-content: center; } + .subpage-hero__actions { + margin-top: auto; + padding-top: 0.95rem; + display: flex; + gap: 0.5rem; + align-items: center; + } .subpage-hero__meter-value { font-size: 2.15rem; font-weight: 500; @@ -204,11 +212,6 @@ margin-top: 0.4rem; font-weight: 500; } - .subpage-hero__actions { - display: flex; - gap: 0.5rem; - align-items: center; - } @media (max-width: 640px) { .subpage-hero { padding: 1.1rem 1.2rem 1.25rem; }