From 4c599c17f4525130532b912db856880e9b1e455a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@probo.com>
Date: Wed, 15 Jul 2026 19:31:15 +0200
Subject: [PATCH] Align subprocessors header spacing with the design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../src/pages/subprocessors/SubprocessorsPage.tsx          | 2 +-
 .../src/pages/subprocessors/SubprocessorsPageSkeleton.tsx  | 7 ++++++-
 .../subprocessors/_components/SubprocessorsToolbar.tsx     | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/compliance-portal/src/pages/subprocessors/SubprocessorsPage.tsx b/apps/compliance-portal/src/pages/subprocessors/SubprocessorsPage.tsx
index f0d491712..26b93c351 100644
--- a/apps/compliance-portal/src/pages/subprocessors/SubprocessorsPage.tsx
+++ b/apps/compliance-portal/src/pages/subprocessors/SubprocessorsPage.tsx
@@ -104,7 +104,7 @@ export function SubprocessorsPage({ queryRef }: SubprocessorsPageProps) {
 
   return (
     <>
-      <PageHeader title={t("title")} count={subprocessors.totalCount}>
+      <PageHeader title={t("title")} count={subprocessors.totalCount} flushBottomSpace>
         <SubprocessorsToolbar queryKey={root} />
       </PageHeader>
       <div className="flex w-full flex-col items-center px-8 py-8">
diff --git a/apps/compliance-portal/src/pages/subprocessors/SubprocessorsPageSkeleton.tsx b/apps/compliance-portal/src/pages/subprocessors/SubprocessorsPageSkeleton.tsx
index 695d23890..d1b879917 100644
--- a/apps/compliance-portal/src/pages/subprocessors/SubprocessorsPageSkeleton.tsx
+++ b/apps/compliance-portal/src/pages/subprocessors/SubprocessorsPageSkeleton.tsx
@@ -28,9 +28,14 @@ const CARD_PLACEHOLDERS = ["a", "b", "c", "d", "e", "f"];
 export function SubprocessorsPageSkeleton() {
   return (
     <>
-      <HeaderBand>
+      <HeaderBand flushBottomSpace>
         <div className="flex w-full flex-col gap-2">
           <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>
       </HeaderBand>
       <div className="flex w-full flex-col items-center px-8 py-8">
diff --git a/apps/compliance-portal/src/pages/subprocessors/_components/SubprocessorsToolbar.tsx b/apps/compliance-portal/src/pages/subprocessors/_components/SubprocessorsToolbar.tsx
index 8ccba7125..222410afd 100644
--- a/apps/compliance-portal/src/pages/subprocessors/_components/SubprocessorsToolbar.tsx
+++ b/apps/compliance-portal/src/pages/subprocessors/_components/SubprocessorsToolbar.tsx
@@ -69,7 +69,7 @@ export function SubprocessorsToolbar({ queryKey }: SubprocessorsToolbarProps) {
   }, [subprocessorCountries, countryLabel]);
 
   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">
         <Select value={category || null} onValueChange={value => setCategory(value ?? "")}>
           <SelectTrigger placeholder={t("filters.allCategories")}>