rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align subprocessors header spacing with the design

Browse Source 
Give the toolbar a 64px min-height so its controls are vertically
centered, and make the header band flush at the bottom. This widens the
gap above the toolbar and trims the oversized space below it to match
the Figma hero. Mirror the header in the skeleton so it does not jump
when data loads.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-07-15 19:31:15 +02:00
parent bce75355c0
commit 4c599c17f4
3 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/compliance-portal/src/pages/subprocessors/SubprocessorsPage.tsx
View File

@@ -104,7 +104,7 @@ export function SubprocessorsPage({ queryRef }: SubprocessorsPageProps) {
return ( return (
<> <>
<PageHeader title={t("title")} count={subprocessors.totalCount}> <PageHeader title={t("title")} count={subprocessors.totalCount} flushBottomSpace>
<SubprocessorsToolbar queryKey={root} /> <SubprocessorsToolbar queryKey={root} />
</PageHeader> </PageHeader>
<div className="flex w-full flex-col items-center px-8 py-8"> <div className="flex w-full flex-col items-center px-8 py-8">

7
apps/compliance-portal/src/pages/subprocessors/SubprocessorsPageSkeleton.tsx
View File

@@ -28,9 +28,14 @@ const CARD_PLACEHOLDERS = ["a", "b", "c", "d", "e", "f"];
export function SubprocessorsPageSkeleton() { export function SubprocessorsPageSkeleton() {
return ( return (
<> <>
<HeaderBand> <HeaderBand flushBottomSpace>
<div className="flex w-full flex-col gap-2"> <div className="flex w-full flex-col gap-2">
<HeadingSkeleton size={7} className="w-64" /> <HeadingSkeleton size={7} className="w-64" />
<div className="flex min-h-16 items-center gap-3">
<div className="h-8 w-40 animate-pulse rounded-2 bg-sand-3" />
<div className="h-8 w-40 animate-pulse rounded-2 bg-sand-3" />
<div className="h-8 w-60 animate-pulse rounded-2 bg-sand-3" />
</div>
</div> </div>
</HeaderBand> </HeaderBand>
<div className="flex w-full flex-col items-center px-8 py-8"> <div className="flex w-full flex-col items-center px-8 py-8">

2
apps/compliance-portal/src/pages/subprocessors/_components/SubprocessorsToolbar.tsx
View File

@@ -69,7 +69,7 @@ export function SubprocessorsToolbar({ queryKey }: SubprocessorsToolbarProps) {
}, [subprocessorCountries, countryLabel]); }, [subprocessorCountries, countryLabel]);
return ( return (
<div className="flex flex-wrap items-center gap-3"> <div className="flex min-h-16 flex-wrap items-center gap-3">
<div className="w-40"> <div className="w-40">
<Select value={category || null} onValueChange={value => setCategory(value ?? "")}> <Select value={category || null} onValueChange={value => setCategory(value ?? "")}>
<SelectTrigger placeholder={t("filters.allCategories")}> <SelectTrigger placeholder={t("filters.allCategories")}>