Merge pull request #6428 from getkirby/fix/6427-tab-badges

Fix tab badges

panel/src/components/Layout/Tabs.vue

@@ -1,19 +1,18 @@
 <template>
 	<nav v-if="tabs.length > 1" class="k-tabs">
-		<k-button
-			v-for="btn in buttons"
-			ref="visible"
-			:key="btn.name"
-			v-bind="btn"
-			variant="dimmed"
-			class="k-tab-button"
-		>
-			{{ btn.text }}
-
+		<div v-for="btn in buttons" :key="btn.name" class="k-tabs-tab">
+			<k-button
+				ref="visible"
+				v-bind="btn"
+				variant="dimmed"
+				class="k-tab-button"
+			>
+				{{ btn.text }}
+			</k-button>
 			<span v-if="btn.badge" :data-theme="theme" class="k-tabs-badge">
 				{{ btn.badge }}
 			</span>
-		</k-button>
+		</div>
 
 		<template v-if="invisible.length">
 			<k-button
@@ -156,6 +155,10 @@ export default {
 	margin-inline: calc(var(--button-padding) * -1);
 }
 
+.k-tabs-tab {
+	position: relative;
+}
+
 .k-tab-button.k-button {
 	margin-block: 2px;
 	overflow-x: visible;