From fed779ca02f363344d6a03f58edba4b823acd211 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 23 Jan 2026 20:02:24 -0300
Subject: [PATCH] fix(frontend): simplify tab overflow dropdown menu items

Remove unnecessary TabButton wrapper from dropdown menu items in the
Tabs component. The previous implementation caused styling issues with
extra whitespace and inconsistent backgrounds. Now uses the tabLabel
directly as the menu item label.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/navigation/TabMenu/Tabs.tsx    | 26 +++----------------
 1 file changed, 4 insertions(+), 22 deletions(-)

diff --git a/frontend/web/components/navigation/TabMenu/Tabs.tsx b/frontend/web/components/navigation/TabMenu/Tabs.tsx
index 71ea4bf01e37..67af70e3d5da 100644
--- a/frontend/web/components/navigation/TabMenu/Tabs.tsx
+++ b/frontend/web/components/navigation/TabMenu/Tabs.tsx
@@ -181,28 +181,10 @@ const Tabs: React.FC<TabsProps> = ({
                 const actualIndex = i + visibleCount
                 const active = value === actualIndex
                 return {
-                  className: classNames('', [
-                    active
-                      ? 'text-primary fw-semibold bg-primary-opacity-5 fill-primary'
-                      : 'hover-color-primary',
-                  ]),
-                  label: (
-                    <div className='d-flex align-items-center text-nowrap tabs-nav full-width'>
-                      <TabButton
-                        key={`overflow-${actualIndex}`}
-                        isSelected={false}
-                        className={classNames(
-                          'full-width btn-no-focus width-100',
-                          active && 'text-primary fw-semibold fill-primary',
-                        )}
-                        noFocus={noFocus}
-                        child={child}
-                        buttonTheme={buttonTheme}
-                      >
-                        {child.props.tabLabel}
-                      </TabButton>
-                    </div>
-                  ) as React.ReactNode,
+                  className: classNames(
+                    active ? 'text-primary fw-semibold' : '',
+                  ),
+                  label: child.props.tabLabel,
                   onClick: (e: any) => {
                     handleChange(
                       e,