Ensure that field picker icon does not get smushed (#34808)

* Ensure that field picker icon does not get smushed

* removing unhelpful test

* register visualizations in test

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

@@ -33,15 +33,14 @@ export const ChartSettingFieldPickerRoot = styled.div<ChartSettingFieldPickerRoo
     margin-left: 0;
     color: ${color("text-dark")};
     height: 0.625rem;
-
     ${props => props.disabled && "display: none;"}
+    flex-shrink: 0;
   }
 
   ${SelectButton.Content} {
     font-size: 0.875rem;
     line-height: 1rem;
     margin-right: 0.25rem;
-    text-overflow: ellipsis;
     max-width: 100%;
     overflow-wrap: anywhere;
     text-align: left;

frontend/src/metabase/visualizations/visualizations/BarChart.unit.spec.tsx

@@ -5,9 +5,10 @@ import {
   ORDERS_ID,
   SAMPLE_DB_ID,
 } from "metabase-types/api/mocks/presets";
-import registerVisualizations from "metabase/visualizations/register";
 import ChartSettings from "metabase/visualizations/components/ChartSettings";
-import { createMockColumn } from "metabase-types/api/mocks";
+import registerVisualizations from "metabase/visualizations/register";
+import { createMockColumn, createMockDataset } from "metabase-types/api/mocks";
+import type { Series } from "metabase-types/api";
 import Question from "metabase-lib/Question";
 
 registerVisualizations();
@@ -16,41 +17,12 @@ const metadata = createMockMetadata({
   databases: [createSampleDatabase()],
 });
 
-const setup = () => {
-  const question = new Question(
-    {
-      dataset_query: {
-        type: "query",
-        query: {
-          "source-table": ORDERS_ID,
-          aggregrations: [["count"]],
-        },
-        database: SAMPLE_DB_ID,
-      },
-      display: "bar",
-      visualization_settings: {},
-    },
-    metadata,
-  );
-
-  const series = [
-    {
-      card: question.card(),
-      data: {
-        rows: [[1000]],
-        cols: [
-          createMockColumn({
-            source: "aggregation",
-            field_ref: ["aggregation", 0],
-            name: "count",
-            display_name: "Count",
-            base_type: "type/BigInteger",
-          }),
-        ],
-      },
-    },
-  ];
+interface SetupProps {
+  question: Question;
+  series: Series;
+}
 
+const setup = ({ series, question }: SetupProps) => {
   renderWithProviders(
     <ChartSettings
       series={series}
@@ -63,7 +35,41 @@ const setup = () => {
 
 describe("barchart", () => {
   it("should not error when rendering for a question with new breakouts", () => {
-    setup();
+    const question = new Question(
+      {
+        dataset_query: {
+          type: "query",
+          query: {
+            "source-table": ORDERS_ID,
+            aggregrations: [["count"]],
+          },
+          database: SAMPLE_DB_ID,
+        },
+        display: "bar",
+        visualization_settings: {},
+      },
+      metadata,
+    );
+
+    const series = [
+      {
+        card: question.card(),
+        ...createMockDataset({
+          data: {
+            cols: [
+              createMockColumn({
+                source: "aggregation",
+                field_ref: ["aggregation", 0, null],
+                name: "count",
+                display_name: "Count",
+                base_type: "type/BigInteger",
+              }),
+            ],
+          },
+        }),
+      },
+    ];
+    setup({ question, series });
 
     expect(screen.getByText("X-axis")).toBeInTheDocument();
     expect(screen.getByText("No valid fields")).toBeInTheDocument();