From 8eeeb3f8f851450958e7b92ce06e82b640d5a396 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Mon, 20 Jan 2025 19:17:28 +0200
Subject: [PATCH] fix(ui): set header spacing according to designs (24px/68px)

---
 front/src/components/ui/Header.vue           | 9 ++-------
 front/src/components/ui/Layout.vue           | 2 +-
 front/ui-docs/components/ui/layout/header.md | 8 ++++++++
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/front/src/components/ui/Header.vue b/front/src/components/ui/Header.vue
index 617e8e83a..84be1ae82 100644
--- a/front/src/components/ui/Header.vue
+++ b/front/src/components/ui/Header.vue
@@ -21,16 +21,11 @@ const heading =
     : props.h2 ? ({ h2: props.h2 }) as const
       : ({ h3: props.h3 }) as const
 
-console.log("HEADING", heading)
-
-const numberOfColumnsPerItem =
-  'noItems' in props && props.noItems ? 1 : 'tinyItems' in props && props.tinyItems ? 2 : 'smallItems' in props && props['smallItems'] ? 3 : 4
-
 const { style, ...fallthroughProps } = useAttrs()
 </script>
 
 <template>
-  <Layout header flex>
+  <Layout header flex gap-24>
     <div v-if="$slots.image">
       <slot name="image" />
     </div>
@@ -40,7 +35,7 @@ const { style, ...fallthroughProps } = useAttrs()
       >
         <!-- Set distance between baseline and previous row -->
         <Spacer v
-            :size="64"
+            :size="68"
             style="align-self: baseline;"
         />
         <Heading v-bind="heading" style="align-self: baseline; padding:0  0 24px 0; margin:0;"/>
diff --git a/front/src/components/ui/Layout.vue b/front/src/components/ui/Layout.vue
index e8faa3751..4dfcf6214 100644
--- a/front/src/components/ui/Layout.vue
+++ b/front/src/components/ui/Layout.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
   noWrap?: true,
 } & { [P in "stack" | "grid" | "flex" | "columns" | "row" | "page"]?: true | string }
   & { [C in "nav" | "aside" | "header" | "footer" | "main" | "label" | "form" | "h1" | "h2" | "h3" | "h4" | "h5"]?: true }
-  & { [G in 'no-gap' | `gap-${'4' | '8' | '12' | '16' | '32' | '64' | 'auto'}` ]?: true }
+  & { [G in 'no-gap' | `gap-${'4' | '8' | '12' | '16' | '24' | '32' | '64' | 'auto'}` ]?: true }
   & (PastelProps | ColorProps | DefaultProps)
   & RaisedProps
   & VariantProps
diff --git a/front/ui-docs/components/ui/layout/header.md b/front/ui-docs/components/ui/layout/header.md
index b55dea391..b3fa4ed12 100644
--- a/front/ui-docs/components/ui/layout/header.md
+++ b/front/ui-docs/components/ui/layout/header.md
@@ -67,6 +67,14 @@ Make sure to keep the minimum width of the title and the content area narrow to
 
 :::
 
+::: tip Spacing:
+
+The distance between the image and the content area is 24px (`gap-24`). The title baseline is at 68px below top.
+
+[-> Reference design (Penpot)](https://design.funkwhale.audio/#/workspace/a4e0101a-252c-80ef-8003-918b4c2c3927/e3a187f0-0f5e-11ed-adb9-fff9e854a67c?page-id=6ca536f0-0f5f-11ed-adb9-fff9e854a67c)
+
+:::
+
 ### Add an action to the right of the heading
 
 -> Use the `action` prop [which is the same as in the `Section` component](/components/ui/layout/section#provide-an-action).