fix width for tabs with long names (#30540)

* fix width for tabs with long names

* fix font size

frontend/src/metabase/core/components/TabButton/TabButton.styled.tsx

@@ -9,8 +9,21 @@ export interface TabButtonProps {
   disabled?: boolean;
 }
 
+// Wrapper and Resizer are needed to auto-grow the input with its content
+// https://css-tricks.com/auto-growing-inputs-textareas/#aa-resizing-actual-input-elements
+export const TabButtonInputWrapper = styled.span`
+  position: relative;
+`;
+
+export const TabButtonInputResizer = styled.span`
+  visibility: hidden;
+  white-space: pre;
+`;
+
 export const TabButtonInput = styled.input<TabButtonProps & { value: string }>`
-  width: ${props => `${props.value.length}ch`};
+  position: absolute;
+  width: 100%;
+  left: 0;
   padding: 0;
 
   border: none;
@@ -18,6 +31,7 @@ export const TabButtonInput = styled.input<TabButtonProps & { value: string }>`
   background-color: transparent;
 
   color: ${props => (props.isSelected ? color("brand") : color("text-dark"))};
+  font-size: inherit;
   font-weight: bold;
   text-align: center;
 

frontend/src/metabase/core/components/TabButton/TabButton.tsx

@@ -22,7 +22,13 @@ import {
   TabContext,
   TabContextType,
 } from "../Tab";
-import { TabButtonInput, TabButtonRoot, MenuButton } from "./TabButton.styled";
+import {
+  TabButtonInput,
+  TabButtonRoot,
+  MenuButton,
+  TabButtonInputWrapper,
+  TabButtonInputResizer,
+} from "./TabButton.styled";
 import TabButtonMenu from "./TabButtonMenu";
 
 export type TabButtonMenuAction<T> = (
@@ -108,20 +114,24 @@ const TabButton = forwardRef(function TabButton<T>(
       aria-label={label}
       id={getTabId(idPrefix, value)}
     >
-      <TabButtonInput
-        type="text"
-        value={label}
-        isSelected={isSelected}
-        disabled={!isEditing}
-        onChange={onEdit}
-        onKeyPress={handleInputKeyPress}
-        onFocus={e => e.currentTarget.select()}
-        onBlur={onFinishEditing}
-        aria-labelledby={getTabId(idPrefix, value)}
-        id={getTabButtonInputId(idPrefix, value)}
-        ref={inputRef}
-      />
-
+      <TabButtonInputWrapper>
+        <TabButtonInputResizer aria-hidden="true">
+          {label}
+        </TabButtonInputResizer>
+        <TabButtonInput
+          type="text"
+          value={label}
+          isSelected={isSelected}
+          disabled={!isEditing}
+          onChange={onEdit}
+          onKeyPress={handleInputKeyPress}
+          onFocus={e => e.currentTarget.select()}
+          onBlur={onFinishEditing}
+          aria-labelledby={getTabId(idPrefix, value)}
+          id={getTabButtonInputId(idPrefix, value)}
+          ref={inputRef}
+        />
+      </TabButtonInputWrapper>
       {showMenu && (
         <ControlledPopoverWithTrigger
           visible={isMenuOpen}