From 7aa919e58cbcdb9c1d1130f3a971dc04636c9a37 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Thu, 11 Jul 2024 14:58:35 +0200
Subject: [PATCH] fix: broken tab indicator (#5201)

---
 .../web/app/src/components/v2/diff-editor.tsx |  6 +++---
 .../app/src/pages/target-history-version.tsx  | 21 ++++++++++---------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/web/app/src/components/v2/diff-editor.tsx b/packages/web/app/src/components/v2/diff-editor.tsx
index 194671248..64c2a4493 100644
--- a/packages/web/app/src/components/v2/diff-editor.tsx
+++ b/packages/web/app/src/components/v2/diff-editor.tsx
@@ -46,7 +46,7 @@ export const DiffEditor = (props: {
               <div className="mr-2 text-xs font-normal">Navigate changes </div>
               <TooltipProvider>
                 <Tooltip>
-                  <TooltipTrigger>
+                  <TooltipTrigger asChild>
                     <Button
                       variant="ghost"
                       size="icon-sm"
@@ -58,7 +58,7 @@ export const DiffEditor = (props: {
                   <TooltipContent>Previous change</TooltipContent>
                 </Tooltip>
                 <Tooltip>
-                  <TooltipTrigger>
+                  <TooltipTrigger asChild>
                     <Button
                       variant="ghost"
                       size="icon-sm"
@@ -129,7 +129,7 @@ function DownloadButton(props: { contents: string; fileName: string }) {
   return (
     <TooltipProvider>
       <Tooltip>
-        <TooltipTrigger>
+        <TooltipTrigger asChild>
           <Button
             variant="ghost"
             size="sm"
diff --git a/packages/web/app/src/pages/target-history-version.tsx b/packages/web/app/src/pages/target-history-version.tsx
index 5cbec475f..d9823ca4f 100644
--- a/packages/web/app/src/pages/target-history-version.tsx
+++ b/packages/web/app/src/pages/target-history-version.tsx
@@ -283,13 +283,12 @@ function DefaultSchemaVersionView(props: {
           <TabsList className="bg-background border-muted w-full justify-start rounded-none border-x border-b">
             {availableViews.map(item => (
               <Tooltip key={item.value}>
-                <TooltipTrigger
-                  // fixes <button> cannot appear as a descendant of <button>
-                  asChild
-                >
-                  <TabsTrigger value={item.value} disabled={!!item.disabledReason}>
-                    {item.icon}
-                    <span className="ml-2">{item.label}</span>
+                <TooltipTrigger>
+                  <TabsTrigger value={item.value} disabled={!!item.disabledReason} asChild>
+                    <span>
+                      {item.icon}
+                      <span className="ml-2">{item.label}</span>
+                    </span>
                   </TabsTrigger>
                 </TooltipTrigger>
                 {item.disabledReason && (
@@ -457,9 +456,11 @@ function ContractVersionView(props: {
             {availableViews.map(item => (
               <Tooltip key={item.value}>
                 <TooltipTrigger>
-                  <TabsTrigger value={item.value} disabled={!!item.disabledReason}>
-                    {item.icon}
-                    <span className="ml-2">{item.label}</span>
+                  <TabsTrigger value={item.value} disabled={!!item.disabledReason} asChild>
+                    <span>
+                      {item.icon}
+                      <span className="ml-2">{item.label}</span>
+                    </span>
                   </TabsTrigger>
                 </TooltipTrigger>
                 {item.disabledReason && (