From 35e44a8015d5654d4b0835f9fd3d1a493676abad Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Wed, 1 May 2024 14:20:02 +0200
Subject: [PATCH] Fix tab badges

Fixes #6427
---
 panel/src/components/Layout/Tabs.vue | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/panel/src/components/Layout/Tabs.vue b/panel/src/components/Layout/Tabs.vue
index e8dfd22bdc..63f845c572 100644
--- a/panel/src/components/Layout/Tabs.vue
+++ b/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;