From d20744bb70dfb9b076d2251e07aa997ff16647c0 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Mon, 20 Jan 2025 19:08:12 +0200
Subject: [PATCH] docs(ui-docs): add code example and explain responsive
 behavior

---
 front/ui-docs/components/ui/layout/header.md | 24 +++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/front/ui-docs/components/ui/layout/header.md b/front/ui-docs/components/ui/layout/header.md
index a13ddd048..b55dea391 100644
--- a/front/ui-docs/components/ui/layout/header.md
+++ b/front/ui-docs/components/ui/layout/header.md
@@ -19,7 +19,7 @@ Place the `Header` at the beginning of a page. Choose an appropriate heading lev
 
 <Header h1="My title" />
 
-## Add an image
+### Add an image
 
 Use the `<template #image>` slot to place a picture to the left of the header.
 
@@ -27,8 +27,18 @@ Use the `<template #image>` slot to place a picture to the left of the header.
 <Header h1="My title">
   <template #image>
     <img
+    style="width: 196px;"
     src="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb" />
   </template>
+  <div style="height: 48px;">
+    My subtitle
+  </div>
+  <Layout flex gap-8>
+    <Button outline square>A</Button>
+    <Button outline square>B</Button>
+    <Spacer h grow />
+    <Button outline square>C</Button>
+  </Layout>
 </Header>
 ```
 
@@ -49,6 +59,14 @@ Use the `<template #image>` slot to place a picture to the left of the header.
   </Layout>
 </Header>
 
-## Add an action to the right of the heading
+::: tip Responsive layout:
 
--> Use the `action` prop [which is the same as in the `Section` component](/components/ui/layout/section).
+On narrow screens, the header will first wrap between image and title/content area.
+
+Make sure to keep the minimum width of the title and the content area narrow to prevent unnecessary wrapping.
+
+:::
+
+### 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).