fix(widget-builder): Visualize field overflows on long field names (#85271)

some weird UI that I fixed

| Before | After |
|--------|--------|
| <img width="569" alt="image"
src="https://github.com/user-attachments/assets/5f0df3a5-4157-4cc4-8e96-4706701560a1"
/> | <img width="518" alt="image"
src="https://github.com/user-attachments/assets/0d36773b-196d-4452-b3d9-1cc4cba7e703"
/> |

Author: nikkikapadia

Diff for: static/app/views/dashboards/widgetBuilder/components/common/sortableFieldWrapper.tsx

@@ -30,7 +30,7 @@ function SortableVisualizeFieldWrapper({
     transition,
     zIndex: 'auto',
     display: 'flex',
-    gap: space(1),
+    gap: space(0.5),
     width: '100%',
   } as React.CSSProperties;
 

Diff for: static/app/views/dashboards/widgetBuilder/components/visualize/index.tsx

@@ -899,12 +899,13 @@ export const FieldBar = styled('div')`
   grid-template-columns: 1fr;
   gap: ${space(1)};
   flex: 3;
+  min-width: 0;
 `;
 
 export const PrimarySelectRow = styled('div')<{hasColumnParameter: boolean}>`
   display: flex;
   width: 100%;
-  flex: 3;
+  min-width: 0;
 
   & > ${ColumnCompactSelect} > button {
     border-top-left-radius: 0;
@@ -926,6 +927,7 @@ export const FieldRow = styled('div')`
   flex-direction: row;
   gap: ${space(1)};
   width: 100%;
+  min-width: 0;
 `;
 
 export const StyledDeleteButton = styled(Button)``;

Diff for: static/app/views/dashboards/widgetBuilder/components/visualize/selectRow.tsx

@@ -17,8 +17,7 @@ import {
 } from 'sentry/utils/discover/fields';
 import useOrganization from 'sentry/utils/useOrganization';
 import {getDatasetConfig} from 'sentry/views/dashboards/datasetConfig/base';
-import {WidgetType} from 'sentry/views/dashboards/types';
-import {DisplayType} from 'sentry/views/dashboards/types';
+import {DisplayType, WidgetType} from 'sentry/views/dashboards/types';
 import {
   AggregateCompactSelect,
   getAggregateValueKey,