From d6a95e14975ae5a95a7feb604eefdb55c70595aa Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 14 Jan 2026 08:06:57 +0000
Subject: [PATCH 1/6] Initial plan


From 77381dcba60bde90a10542017cb172162f5b61b6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 14 Jan 2026 08:12:30 +0000
Subject: [PATCH 2/6] Refactor inspector to tabbed layout with 250px width and
 removed icon

Co-authored-by: ev-sc <4164774+ev-sc@users.noreply.github.com>
---
 .../components/inspector/InspectorPanel.tsx   | 121 +++++++++++-------
 1 file changed, 74 insertions(+), 47 deletions(-)

diff --git a/src/app/map/[id]/components/inspector/InspectorPanel.tsx b/src/app/map/[id]/components/inspector/InspectorPanel.tsx
index b49cfb70f..849d7e0f8 100644
--- a/src/app/map/[id]/components/inspector/InspectorPanel.tsx
+++ b/src/app/map/[id]/components/inspector/InspectorPanel.tsx
@@ -6,10 +6,10 @@ import { useTable } from "@/app/map/[id]/hooks/useTable";
 import DataSourceIcon from "@/components/DataSourceIcon";
 import { useTRPC } from "@/services/trpc/react";
 import { Button } from "@/shadcn/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shadcn/ui/tabs";
 import { cn } from "@/shadcn/utils";
 import { LayerType } from "@/types";
 import { useMapRef } from "../../hooks/useMapCore";
-import LayerTypeIcon from "../LayerTypeIcon";
 import BoundaryMarkersList from "./BoundaryMarkersList";
 import PropertiesList from "./PropertiesList";
 import TurfMarkersList from "./TurfMarkersList";
@@ -65,15 +65,14 @@ export default function InspectorPanel() {
     <div
       id="inspector-panel"
       className={cn(
-        "absolute top-0 bottom-0 right-4 / flex flex-col gap-6 w-60 py-5 h-fit max-h-full",
+        "absolute top-0 bottom-0 right-4 / flex flex-col gap-6 py-5 h-fit max-h-full",
         tableOpen ? "bottom-0" : "bottom-24", // to avoid clash with bug report button
       )}
+      style={{ width: "250px" }}
     >
       <div className="relative z-100 w-full max-h-full overflow-auto / flex flex-col / rounded shadow-lg bg-white / text-sm font-sans">
         <div className="flex justify-between items-start gap-4 p-4">
           <h1 className="grow flex gap-2 / text-sm font-semibold">
-            <LayerTypeIcon type={inspectorContent?.type} className="mt-1" />
-
             {inspectorContent?.name as string}
           </h1>
           <button
@@ -106,54 +105,82 @@ export default function InspectorPanel() {
           </div>
         )}
 
-        <div className="grow overflow-auto flex flex-col gap-4 [&:not(:empty)]:border-t [&:not(:empty)]:p-4">
-          {dataSource && (
-            <div className="bg-muted py-1 px-2 rounded">
-              <h3 className="mb-1 / text-muted-foreground text-xs uppercase font-mono">
-                Data source
-              </h3>
-              <div className="flex items-center gap-2">
-                <div className="shrink-0">
-                  <DataSourceIcon type={dataSource.config?.type as string} />
+        <Tabs defaultValue="stats" className="flex flex-col overflow-hidden">
+          <div className="px-4 border-t">
+            <TabsList className="w-full grid grid-cols-3">
+              <TabsTrigger value="stats">Stats</TabsTrigger>
+              <TabsTrigger value="markers">
+                Markers{" "}
+                {(type === LayerType.Boundary || type === LayerType.Turf) && (
+                  <span className="ml-1">
+                    {/* Count will be shown dynamically */}
+                  </span>
+                )}
+              </TabsTrigger>
+              <TabsTrigger value="notes">Notes 0</TabsTrigger>
+            </TabsList>
+          </div>
+
+          <TabsContent value="stats" className="grow overflow-auto px-4 pb-4">
+            <div className="flex flex-col gap-4">
+              {dataSource && (
+                <div className="bg-muted py-1 px-2 rounded">
+                  <h3 className="mb-1 / text-muted-foreground text-xs uppercase font-mono">
+                    Data source
+                  </h3>
+                  <div className="flex items-center gap-2">
+                    <div className="shrink-0">
+                      <DataSourceIcon type={dataSource.config?.type as string} />
+                    </div>
+
+                    <p className="truncate">{dataSource.name}</p>
+                  </div>
                 </div>
+              )}
 
-                <p className="truncate">{dataSource.name}</p>
-              </div>
-            </div>
-          )}
-
-          {recordLoading ? (
-            <span>Loading...</span>
-          ) : (
-            <PropertiesList
-              properties={{ ...properties, ...recordData?.json }}
-            />
-          )}
-
-          {type === LayerType.Turf && <TurfMarkersList />}
-
-          {type === LayerType.Boundary && <BoundaryMarkersList />}
-
-          {(isDetailsView || dataSource) && (
-            <div className="flex flex-col gap-3 border-t pt-4">
-              {isDetailsView && focusedRecord?.geocodePoint && (
-                <Button onClick={() => flyToMarker()}>
-                  <MapPinIcon />
-                  View on map
-                </Button>
+              {recordLoading ? (
+                <span>Loading...</span>
+              ) : (
+                <PropertiesList
+                  properties={{ ...properties, ...recordData?.json }}
+                />
               )}
-              {dataSource && (
-                <Button
-                  variant="secondary"
-                  onClick={() => setSelectedDataSourceId(dataSource.id)}
-                >
-                  <TableIcon />
-                  View in table
-                </Button>
+
+              {(isDetailsView || dataSource) && (
+                <div className="flex flex-col gap-3 border-t pt-4">
+                  {isDetailsView && focusedRecord?.geocodePoint && (
+                    <Button onClick={() => flyToMarker()}>
+                      <MapPinIcon />
+                      View on map
+                    </Button>
+                  )}
+                  {dataSource && (
+                    <Button
+                      variant="secondary"
+                      onClick={() => setSelectedDataSourceId(dataSource.id)}
+                    >
+                      <TableIcon />
+                      View in table
+                    </Button>
+                  )}
+                </div>
               )}
             </div>
-          )}
-        </div>
+          </TabsContent>
+
+          <TabsContent value="markers" className="grow overflow-auto px-4 pb-4">
+            <div className="flex flex-col gap-4">
+              {type === LayerType.Turf && <TurfMarkersList />}
+              {type === LayerType.Boundary && <BoundaryMarkersList />}
+            </div>
+          </TabsContent>
+
+          <TabsContent value="notes" className="grow overflow-auto px-4 pb-4">
+            <div className="flex flex-col gap-4">
+              <p className="text-muted-foreground">No notes yet</p>
+            </div>
+          </TabsContent>
+        </Tabs>
       </div>
     </div>
   );

From 0b703d4a128dafea5b200be7e100457856b5f4c0 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 14 Jan 2026 08:13:48 +0000
Subject: [PATCH 3/6] Remove marker count comment per code review feedback

Co-authored-by: ev-sc <4164774+ev-sc@users.noreply.github.com>
---
 src/app/map/[id]/components/inspector/InspectorPanel.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/app/map/[id]/components/inspector/InspectorPanel.tsx b/src/app/map/[id]/components/inspector/InspectorPanel.tsx
index 849d7e0f8..eb430a628 100644
--- a/src/app/map/[id]/components/inspector/InspectorPanel.tsx
+++ b/src/app/map/[id]/components/inspector/InspectorPanel.tsx
@@ -109,14 +109,7 @@ export default function InspectorPanel() {
           <div className="px-4 border-t">
             <TabsList className="w-full grid grid-cols-3">
               <TabsTrigger value="stats">Stats</TabsTrigger>
-              <TabsTrigger value="markers">
-                Markers{" "}
-                {(type === LayerType.Boundary || type === LayerType.Turf) && (
-                  <span className="ml-1">
-                    {/* Count will be shown dynamically */}
-                  </span>
-                )}
-              </TabsTrigger>
+              <TabsTrigger value="markers">Markers</TabsTrigger>
               <TabsTrigger value="notes">Notes 0</TabsTrigger>
             </TabsList>
           </div>

From 8221bde9935d45ca6159be3a6148f46458168962 Mon Sep 17 00:00:00 2001
From: ev <4164774+ev-sc@users.noreply.github.com>
Date: Wed, 14 Jan 2026 09:33:13 +0100
Subject: [PATCH 4/6] Add new underline tabs component

---
 .../components/inspector/InspectorPanel.tsx   | 74 +++++++++++++++----
 .../components/inspector/UnderlineTabs.tsx    | 71 ++++++++++++++++++
 2 files changed, 129 insertions(+), 16 deletions(-)
 create mode 100644 src/app/map/[id]/components/inspector/UnderlineTabs.tsx

diff --git a/src/app/map/[id]/components/inspector/InspectorPanel.tsx b/src/app/map/[id]/components/inspector/InspectorPanel.tsx
index eb430a628..c26563e4d 100644
--- a/src/app/map/[id]/components/inspector/InspectorPanel.tsx
+++ b/src/app/map/[id]/components/inspector/InspectorPanel.tsx
@@ -1,18 +1,29 @@
 import { useQuery } from "@tanstack/react-query";
-import { ArrowLeftIcon, MapPinIcon, TableIcon, XIcon } from "lucide-react";
+import {
+  ArrowLeftIcon,
+  MapPinIcon,
+  SettingsIcon,
+  TableIcon,
+  XIcon,
+} from "lucide-react";
 
 import { useInspector } from "@/app/map/[id]/hooks/useInspector";
 import { useTable } from "@/app/map/[id]/hooks/useTable";
 import DataSourceIcon from "@/components/DataSourceIcon";
 import { useTRPC } from "@/services/trpc/react";
 import { Button } from "@/shadcn/ui/button";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shadcn/ui/tabs";
 import { cn } from "@/shadcn/utils";
 import { LayerType } from "@/types";
 import { useMapRef } from "../../hooks/useMapCore";
 import BoundaryMarkersList from "./BoundaryMarkersList";
 import PropertiesList from "./PropertiesList";
 import TurfMarkersList from "./TurfMarkersList";
+import {
+  UnderlineTabs,
+  UnderlineTabsContent,
+  UnderlineTabsList,
+  UnderlineTabsTrigger,
+} from "./UnderlineTabs";
 
 export default function InspectorPanel() {
   const {
@@ -22,6 +33,7 @@ export default function InspectorPanel() {
     selectedTurf,
     focusedRecord,
     setFocusedRecord,
+    selectedRecords,
   } = useInspector();
   const mapRef = useMapRef();
   const { setSelectedDataSourceId, selectedDataSourceId } = useTable();
@@ -49,6 +61,8 @@ export default function InspectorPanel() {
     (selectedTurf && type !== LayerType.Turf) ||
     (selectedBoundary && type !== LayerType.Boundary);
 
+  const markerCount = selectedRecords?.length || 0;
+
   const onCloseDetailsView = () => {
     setFocusedRecord(null);
   };
@@ -105,16 +119,27 @@ export default function InspectorPanel() {
           </div>
         )}
 
-        <Tabs defaultValue="stats" className="flex flex-col overflow-hidden">
+        <UnderlineTabs
+          defaultValue="data"
+          className="flex flex-col overflow-hidden"
+        >
           <div className="px-4 border-t">
-            <TabsList className="w-full grid grid-cols-3">
-              <TabsTrigger value="stats">Stats</TabsTrigger>
-              <TabsTrigger value="markers">Markers</TabsTrigger>
-              <TabsTrigger value="notes">Notes 0</TabsTrigger>
-            </TabsList>
+            <UnderlineTabsList className="w-full grid grid-cols-4">
+              <UnderlineTabsTrigger value="data">Data</UnderlineTabsTrigger>
+              <UnderlineTabsTrigger value="markers">
+                Markers {markerCount > 0 ? markerCount : ""}
+              </UnderlineTabsTrigger>
+              <UnderlineTabsTrigger value="notes">Notes 0</UnderlineTabsTrigger>
+              <UnderlineTabsTrigger value="config" className="px-2">
+                <SettingsIcon size={16} />
+              </UnderlineTabsTrigger>
+            </UnderlineTabsList>
           </div>
 
-          <TabsContent value="stats" className="grow overflow-auto px-4 pb-4">
+          <UnderlineTabsContent
+            value="data"
+            className="grow overflow-auto px-4 pb-4"
+          >
             <div className="flex flex-col gap-4">
               {dataSource && (
                 <div className="bg-muted py-1 px-2 rounded">
@@ -123,7 +148,9 @@ export default function InspectorPanel() {
                   </h3>
                   <div className="flex items-center gap-2">
                     <div className="shrink-0">
-                      <DataSourceIcon type={dataSource.config?.type as string} />
+                      <DataSourceIcon
+                        type={dataSource.config?.type as string}
+                      />
                     </div>
 
                     <p className="truncate">{dataSource.name}</p>
@@ -159,21 +186,36 @@ export default function InspectorPanel() {
                 </div>
               )}
             </div>
-          </TabsContent>
+          </UnderlineTabsContent>
 
-          <TabsContent value="markers" className="grow overflow-auto px-4 pb-4">
+          <UnderlineTabsContent
+            value="markers"
+            className="grow overflow-auto px-4 pb-4"
+          >
             <div className="flex flex-col gap-4">
               {type === LayerType.Turf && <TurfMarkersList />}
               {type === LayerType.Boundary && <BoundaryMarkersList />}
             </div>
-          </TabsContent>
+          </UnderlineTabsContent>
 
-          <TabsContent value="notes" className="grow overflow-auto px-4 pb-4">
+          <UnderlineTabsContent
+            value="notes"
+            className="grow overflow-auto px-4 pb-4"
+          >
             <div className="flex flex-col gap-4">
               <p className="text-muted-foreground">No notes yet</p>
             </div>
-          </TabsContent>
-        </Tabs>
+          </UnderlineTabsContent>
+
+          <UnderlineTabsContent
+            value="config"
+            className="grow overflow-auto px-4 pb-4"
+          >
+            <div className="flex flex-col gap-4">
+              <p className="text-muted-foreground">Configuration options</p>
+            </div>
+          </UnderlineTabsContent>
+        </UnderlineTabs>
       </div>
     </div>
   );
diff --git a/src/app/map/[id]/components/inspector/UnderlineTabs.tsx b/src/app/map/[id]/components/inspector/UnderlineTabs.tsx
new file mode 100644
index 000000000..9b72f30d4
--- /dev/null
+++ b/src/app/map/[id]/components/inspector/UnderlineTabs.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { cn } from "@/shadcn/utils";
+
+function UnderlineTabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root className={cn("flex flex-col", className)} {...props} />
+  );
+}
+
+function UnderlineTabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      className={cn(
+        "inline-flex w-full items-center justify-start border-b border-border",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function UnderlineTabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      className={cn(
+        "relative inline-flex flex-1 items-center justify-center px-3 py-2 text-sm font-normal text-muted-foreground whitespace-nowrap transition-colors",
+        "hover:text-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "data-[state=active]:text-foreground data-[state=active]:font-medium",
+        "after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[2px] after:bg-transparent",
+        "data-[state=active]:after:bg-foreground",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function UnderlineTabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  UnderlineTabs,
+  UnderlineTabsList,
+  UnderlineTabsTrigger,
+  UnderlineTabsContent,
+};

From 7b9cf42be9bf13e5d44757d44893bbdeabf261cf Mon Sep 17 00:00:00 2001
From: ev <4164774+ev-sc@users.noreply.github.com>
Date: Wed, 14 Jan 2026 09:51:51 +0100
Subject: [PATCH 5/6] refactor: update InspectorPanel and UnderlineTabs for
 improved layout and styling

---
 .../components/inspector/InspectorPanel.tsx   | 39 ++++++++-----------
 .../components/inspector/UnderlineTabs.tsx    | 10 ++---
 2 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/src/app/map/[id]/components/inspector/InspectorPanel.tsx b/src/app/map/[id]/components/inspector/InspectorPanel.tsx
index c26563e4d..05bc4a9ef 100644
--- a/src/app/map/[id]/components/inspector/InspectorPanel.tsx
+++ b/src/app/map/[id]/components/inspector/InspectorPanel.tsx
@@ -82,10 +82,10 @@ export default function InspectorPanel() {
         "absolute top-0 bottom-0 right-4 / flex flex-col gap-6 py-5 h-fit max-h-full",
         tableOpen ? "bottom-0" : "bottom-24", // to avoid clash with bug report button
       )}
-      style={{ width: "250px" }}
+      style={{ minWidth: "250px" }}
     >
       <div className="relative z-100 w-full max-h-full overflow-auto / flex flex-col / rounded shadow-lg bg-white / text-sm font-sans">
-        <div className="flex justify-between items-start gap-4 p-4">
+        <div className="flex justify-between items-center gap-4 p-3">
           <h1 className="grow flex gap-2 / text-sm font-semibold">
             {inspectorContent?.name as string}
           </h1>
@@ -123,23 +123,18 @@ export default function InspectorPanel() {
           defaultValue="data"
           className="flex flex-col overflow-hidden"
         >
-          <div className="px-4 border-t">
-            <UnderlineTabsList className="w-full grid grid-cols-4">
-              <UnderlineTabsTrigger value="data">Data</UnderlineTabsTrigger>
-              <UnderlineTabsTrigger value="markers">
-                Markers {markerCount > 0 ? markerCount : ""}
-              </UnderlineTabsTrigger>
-              <UnderlineTabsTrigger value="notes">Notes 0</UnderlineTabsTrigger>
-              <UnderlineTabsTrigger value="config" className="px-2">
-                <SettingsIcon size={16} />
-              </UnderlineTabsTrigger>
-            </UnderlineTabsList>
-          </div>
-
-          <UnderlineTabsContent
-            value="data"
-            className="grow overflow-auto px-4 pb-4"
-          >
+          <UnderlineTabsList className="w-full flex gap-6 border-t px-3">
+            <UnderlineTabsTrigger value="data">Data</UnderlineTabsTrigger>
+            <UnderlineTabsTrigger value="markers">
+              Markers {markerCount > 0 ? markerCount : ""}
+            </UnderlineTabsTrigger>
+            <UnderlineTabsTrigger value="notes">Notes 0</UnderlineTabsTrigger>
+            <UnderlineTabsTrigger value="config" className="px-2">
+              <SettingsIcon size={16} />
+            </UnderlineTabsTrigger>
+          </UnderlineTabsList>
+
+          <UnderlineTabsContent value="data" className="grow overflow-auto p-3">
             <div className="flex flex-col gap-4">
               {dataSource && (
                 <div className="bg-muted py-1 px-2 rounded">
@@ -190,7 +185,7 @@ export default function InspectorPanel() {
 
           <UnderlineTabsContent
             value="markers"
-            className="grow overflow-auto px-4 pb-4"
+            className="grow overflow-auto p-3"
           >
             <div className="flex flex-col gap-4">
               {type === LayerType.Turf && <TurfMarkersList />}
@@ -200,7 +195,7 @@ export default function InspectorPanel() {
 
           <UnderlineTabsContent
             value="notes"
-            className="grow overflow-auto px-4 pb-4"
+            className="grow overflow-auto p-3"
           >
             <div className="flex flex-col gap-4">
               <p className="text-muted-foreground">No notes yet</p>
@@ -209,7 +204,7 @@ export default function InspectorPanel() {
 
           <UnderlineTabsContent
             value="config"
-            className="grow overflow-auto px-4 pb-4"
+            className="grow overflow-auto p-3"
           >
             <div className="flex flex-col gap-4">
               <p className="text-muted-foreground">Configuration options</p>
diff --git a/src/app/map/[id]/components/inspector/UnderlineTabs.tsx b/src/app/map/[id]/components/inspector/UnderlineTabs.tsx
index 9b72f30d4..1343bd515 100644
--- a/src/app/map/[id]/components/inspector/UnderlineTabs.tsx
+++ b/src/app/map/[id]/components/inspector/UnderlineTabs.tsx
@@ -36,13 +36,13 @@ function UnderlineTabsTrigger({
   return (
     <TabsPrimitive.Trigger
       className={cn(
-        "relative inline-flex flex-1 items-center justify-center px-3 py-2 text-sm font-normal text-muted-foreground whitespace-nowrap transition-colors",
+        "relative inline-flex w-fit items-center justify-center h-9 text-sm font-medium text-muted-foreground whitespace-nowrap transition-colors cursor-pointer",
         "hover:text-foreground",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        "disabled:pointer-events-none disabled:opacity-50",
-        "data-[state=active]:text-foreground data-[state=active]:font-medium",
-        "after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[2px] after:bg-transparent",
-        "data-[state=active]:after:bg-foreground",
+        "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
+        "data-[state=active]:text-foreground",
+        "after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:h-[2px] after:bg-transparent",
+        "data-[state=active]:after:w-full data-[state=active]:after:left-0 data-[state=active]:after:translate-x-0 data-[state=active]:after:bg-foreground",
         "[&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}

From 62f0bf56367c77136535af1b4707703b3073d9d3 Mon Sep 17 00:00:00 2001
From: ev <4164774+ev-sc@users.noreply.github.com>
Date: Wed, 14 Jan 2026 09:57:49 +0100
Subject: [PATCH 6/6] refactor: enhance UnderlineTabsList with dynamic
 underline positioning and styling

---
 .../components/inspector/UnderlineTabs.tsx    | 74 +++++++++++++++++--
 1 file changed, 68 insertions(+), 6 deletions(-)

diff --git a/src/app/map/[id]/components/inspector/UnderlineTabs.tsx b/src/app/map/[id]/components/inspector/UnderlineTabs.tsx
index 1343bd515..f46892390 100644
--- a/src/app/map/[id]/components/inspector/UnderlineTabs.tsx
+++ b/src/app/map/[id]/components/inspector/UnderlineTabs.tsx
@@ -18,14 +18,75 @@ function UnderlineTabsList({
   className,
   ...props
 }: React.ComponentProps<typeof TabsPrimitive.List>) {
+  const [underlineStyle, setUnderlineStyle] = React.useState({
+    left: 0,
+    width: 0,
+  });
+  const listRef = React.useRef<HTMLDivElement>(null);
+
+  const updateUnderline = React.useCallback(() => {
+    if (!listRef.current) return;
+
+    const activeButton = listRef.current.querySelector(
+      '[data-state="active"]',
+    ) as HTMLButtonElement;
+    if (!activeButton) return;
+
+    const listRect = listRef.current.getBoundingClientRect();
+    const buttonRect = activeButton.getBoundingClientRect();
+
+    setUnderlineStyle({
+      left: buttonRect.left - listRect.left,
+      width: buttonRect.width,
+    });
+  }, []);
+
+  React.useEffect(() => {
+    updateUnderline();
+
+    // Use MutationObserver to watch for data-state changes
+    const mutationObserver = new MutationObserver(updateUnderline);
+    if (listRef.current) {
+      mutationObserver.observe(listRef.current, {
+        attributes: true,
+        attributeFilter: ["data-state"],
+        subtree: true,
+      });
+    }
+
+    // Also use ResizeObserver for size changes
+    const resizeObserver = new ResizeObserver(updateUnderline);
+    if (listRef.current) {
+      resizeObserver.observe(listRef.current);
+    }
+
+    window.addEventListener("resize", updateUnderline);
+
+    return () => {
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", updateUnderline);
+    };
+  }, [updateUnderline]);
+
   return (
     <TabsPrimitive.List
+      ref={listRef}
       className={cn(
-        "inline-flex w-full items-center justify-start border-b border-border",
+        "relative inline-flex w-full items-center justify-start border-b border-border",
         className,
       )}
       {...props}
-    />
+    >
+      {props.children}
+      <div
+        className="absolute bottom-0 h-[2px] bg-foreground transition-all duration-300 ease-out pointer-events-none"
+        style={{
+          left: `${underlineStyle.left}px`,
+          width: `${underlineStyle.width}px`,
+        }}
+      />
+    </TabsPrimitive.List>
   );
 }
 
@@ -36,13 +97,11 @@ function UnderlineTabsTrigger({
   return (
     <TabsPrimitive.Trigger
       className={cn(
-        "relative inline-flex w-fit items-center justify-center h-9 text-sm font-medium text-muted-foreground whitespace-nowrap transition-colors cursor-pointer",
+        "relative inline-flex w-fit items-center justify-center py-3 h-auto text-sm font-medium text-muted-foreground whitespace-nowrap transition-colors cursor-pointer",
         "hover:text-foreground",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
         "data-[state=active]:text-foreground",
-        "after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:h-[2px] after:bg-transparent",
-        "data-[state=active]:after:w-full data-[state=active]:after:left-0 data-[state=active]:after:translate-x-0 data-[state=active]:after:bg-foreground",
         "[&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
@@ -57,7 +116,10 @@ function UnderlineTabsContent({
 }: React.ComponentProps<typeof TabsPrimitive.Content>) {
   return (
     <TabsPrimitive.Content
-      className={cn("flex-1 outline-none", className)}
+      className={cn(
+        "flex-1 outline-none animate-in fade-in duration-300",
+        className,
+      )}
       {...props}
     />
   );