Wrap long column names in chart settings sidebar (#33024)

e2e/test/scenarios/question/reproductions/32964-long-column-name-in-visualization-settings.cy.spec.js

+import { restore, visitQuestionAdhoc } from "e2e/support/helpers";
+import { SAMPLE_DB_ID } from "e2e/support/cypress_data";
+import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
+const { ORDERS_ID } = SAMPLE_DATABASE;
+
+const LONG_NAME = "A very long column name that will cause text overflow";
+
+const QUESTION = {
+  dataset_query: {
+    type: "query",
+    database: SAMPLE_DB_ID,
+    query: {
+      "source-table": ORDERS_ID,
+      expressions: {
+        [LONG_NAME]: ["*", ["field", SAMPLE_DATABASE.ORDERS.SUBTOTAL, null], 2],
+      },
+      aggregation: [["sum", ["expression", LONG_NAME]]],
+      breakout: [
+        [
+          "field",
+          SAMPLE_DATABASE.ORDERS.CREATED_AT,
+          {
+            "base-type": "type/DateTime",
+            "temporal-unit": "week",
+          },
+        ],
+      ],
+    },
+  },
+};
+
+describe("issue 32964", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
+  });
+
+  it("should not overflow chart settings sidebar with long column name (metabase#32964)", () => {
+    visitQuestionAdhoc(QUESTION);
+    cy.findByTestId("viz-settings-button").click();
+    cy.findByTestId("sidebar-left").within(([sidebar]) => {
+      const maxX = sidebar.getBoundingClientRect().right;
+      cy.findByText(`Sum of ${LONG_NAME}`).then(([el]) => {
+        const x = el.getBoundingClientRect().right;
+        expect(x).to.be.lessThan(maxX);
+      });
+    });
+  });
+});

frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.styled.tsx

@@ -43,7 +43,8 @@ export const ChartSettingFieldPickerRoot = styled.div<ChartSettingFieldPickerRoo
     margin-right: 0.25rem;
     text-overflow: ellipsis;
     max-width: 100%;
-    white-space: nowrap;
+    overflow-wrap: anywhere;
+    text-align: left;
     overflow: hidden;
     color: ${color("text-dark")};
   }

frontend/src/metabase/visualizations/components/settings/ColumnItem.styled.tsx

@@ -74,6 +74,7 @@ export const ColumnItemIcon = styled(Button)`
 
 export const ColumnItemDragHandle = styled(Icon)`
   color: ${color("text-medium")};
+  flex-shrink: 0;
 `;
 
 export const ColumnItemColorPicker = styled(ChartSettingColorPicker)`