Fix wrapping in QueryColumnPicker (#42246)

e2e/test/scenarios/question/reproductions/42244-column-picker-wrapping.cy.spec.js

+import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
+import {
+  getNotebookStep,
+  openOrdersTable,
+  popover,
+  restore,
+  summarize,
+} from "e2e/support/helpers";
+
+const { ORDERS } = SAMPLE_DATABASE;
+
+const COLUMN_NAME = "Created At".repeat(5);
+
+describe("issue 42244", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
+    cy.request("PUT", `/api/field/${ORDERS.CREATED_AT}`, {
+      display_name: COLUMN_NAME,
+    });
+  });
+
+  it("should allow to change the temporal bucket when the column name is long (metabase#42244)", () => {
+    openOrdersTable({ mode: "notebook" });
+    summarize({ mode: "notebook" });
+    getNotebookStep("summarize")
+      .findByText("Pick a column to group by")
+      .click();
+    popover().within(() => {
+      cy.findByText(COLUMN_NAME).realHover();
+      cy.findByText("by month").should("be.visible").click();
+    });
+    popover().last().findByText("Year").click();
+    getNotebookStep("summarize")
+      .findByText(`${COLUMN_NAME}: Year`)
+      .should("be.visible");
+  });
+});

frontend/src/metabase/common/components/QueryColumnPicker/QueryColumnPicker.styled.tsx

 import styled from "@emotion/styled";
 
+import { QueryColumnInfoIcon } from "metabase/components/MetadataInfo/ColumnInfoIcon";
 import AccordionList from "metabase/core/components/AccordionList";
-import { Ellipsified } from "metabase/core/components/Ellipsified";
 import { color } from "metabase/lib/colors";
 import type { ColorName } from "metabase/lib/colors/types";
 
@@ -11,25 +11,20 @@ export const StyledAccordionList = styled(AccordionList)<{ color: ColorName }>`
   color: ${props => color(props.color)};
 `;
 
-export const NameAndBucketing = styled.div`
+export const ColumnNameContainer = styled.div`
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  flex-grow: 1;
-  white-space: nowrap;
-  overflow: hidden;
 
   ${TriggerButton} {
     height: 100%;
     padding: 0;
     flex-shrink: 1;
+    white-space: nowrap;
+    overflow: hidden;
   }
 `;
 
-export const ItemName = styled(Ellipsified)`
-  margin-right: 0.25rem;
-  flex-shrink: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
+export const ColumnInfoIcon = styled(QueryColumnInfoIcon)`
+  align-self: center;
 `;

frontend/src/metabase/common/components/QueryColumnPicker/QueryColumnPicker.tsx

@@ -6,20 +6,17 @@ import {
   getColumnGroupName,
 } from "metabase/common/utils/column-groups";
 import { getColumnIcon } from "metabase/common/utils/columns";
-import {
-  QueryColumnInfoIcon,
-  HoverParent,
-} from "metabase/components/MetadataInfo/ColumnInfoIcon";
+import { HoverParent } from "metabase/components/MetadataInfo/ColumnInfoIcon";
 import type { ColorName } from "metabase/lib/colors/types";
 import type { IconName } from "metabase/ui";
-import { Icon, DelayGroup } from "metabase/ui";
+import { Box, DelayGroup, Icon } from "metabase/ui";
 import * as Lib from "metabase-lib";
 
 import { BucketPickerPopover } from "./BucketPickerPopover";
 import {
+  ColumnInfoIcon,
+  ColumnNameContainer,
   StyledAccordionList,
-  NameAndBucketing,
-  ItemName,
 } from "./QueryColumnPicker.styled";
 
 export type ColumnListItem = Lib.ColumnDisplayInfo & {
@@ -147,8 +144,8 @@ export function QueryColumnPicker({
 
   const renderItemName = useCallback(
     (item: ColumnListItem) => (
-      <NameAndBucketing>
-        <ItemName>{item.displayName}</ItemName>
+      <ColumnNameContainer>
+        <Box mr="sm">{item.displayName}</Box>
         {(hasBinning || hasTemporalBucketing) && (
           <BucketPickerPopover
             query={query}
@@ -163,7 +160,7 @@ export function QueryColumnPicker({
             onSelect={handleSelect}
           />
         )}
-      </NameAndBucketing>
+      </ColumnNameContainer>
     ),
     [
       query,
@@ -179,7 +176,7 @@ export function QueryColumnPicker({
 
   const renderItemExtra = useCallback(
     (item: ColumnListItem) => (
-      <QueryColumnInfoIcon
+      <ColumnInfoIcon
         query={query}
         stageIndex={stageIndex}
         column={item.column}