Fix responsive k-header for many buttons

getkirby · Jul 20, 2024 · 18c06d7 · 18c06d7
1 parent 0cf3f75
commit 18c06d7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/panel/lab/components/headers/index.vue b/panel/lab/components/headers/index.vue
@@ -15,5 +15,16 @@
 				</k-button-group>
 			</k-header>
 		</k-lab-example>
+		<k-lab-example label="long title & many buttons">
+			<k-header :editable="true">
+				This is a rather long title that still should not cause any issues
+				<k-button-group slot="buttons">
+					<k-button icon="open" variant="filled" />
+					<k-button icon="cog" variant="filled" />
+					<k-button icon="heart" text="Favorite" variant="filled" />
+					<k-button icon="star" text="Bookmark" variant="filled" />
+				</k-button-group>
+			</k-header>
+		</k-lab-example>
 	</k-lab-examples>
 </template>
diff --git a/panel/src/components/Layout/Header.vue b/panel/src/components/Layout/Header.vue
@@ -71,6 +71,7 @@ export default {
 	flex-wrap: wrap;
 	align-items: baseline;
 	justify-content: space-between;
+	column-gap: var(--spacing-3);
 	border-bottom: 1px solid var(--color-border);
 	background: var(--header-color-back);
 	padding-top: var(--header-padding-block);
@@ -123,7 +124,6 @@ export default {
 
 .k-header-buttons {
 	display: flex;
-	flex-shrink: 0;
 	gap: var(--spacing-2);
 	margin-bottom: var(--header-padding-block);
 }