DS Picker: Use trigger width as min width (#71501)

public/app/features/datasources/components/picker/DataSourceDropdown.tsx

@@ -337,7 +337,6 @@ function getStylesPickerContent(theme: GrafanaTheme2) {
     container: css`
       display: flex;
       flex-direction: column;
-      max-width: 480px;
       background: ${theme.colors.background.primary};
       box-shadow: ${theme.shadows.z3};
     `,

public/app/features/datasources/components/picker/popperModifiers.ts

@@ -11,15 +11,17 @@ export const maxSize: Modifier<'maxSize', {}> = {
   fn({ state, name, options }: ModifierArguments<{}>) {
     const overflow = detectOverflow(state, options);
     const { x, y } = state.modifiersData.preventOverflow || { x: 0, y: 0 };
-    const { width, height } = state.rects.popper;
+    const { width: contentW, height: contentH } = state.rects.popper;
+    const { width: triggerW } = state.rects.reference;
     const [basePlacement] = state.placement.split('-');
 
     const widthProp = basePlacement === 'left' ? 'left' : 'right';
     const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
 
     state.modifiersData[name] = {
-      width: width - overflow[widthProp] - x,
-      height: height - overflow[heightProp] - y,
+      maxWidth: contentW - overflow[widthProp] - x,
+      maxHeight: contentH - overflow[heightProp] - y,
+      minWidth: triggerW,
     };
   },
 };
@@ -30,17 +32,11 @@ export const applyMaxSize: Modifier<'applyMaxSize', {}> = {
   phase: 'beforeWrite',
   requires: ['maxSize'],
   fn({ state }: ModifierArguments<{}>) {
-    const { height, width } = state.modifiersData.maxSize;
+    const { maxHeight, maxWidth, minWidth } = state.modifiersData.maxSize;
 
-    if (!state.styles.popper.maxHeight) {
-      state.styles.popper.maxHeight = `${height - MODAL_MARGIN}px`;
-    }
-    if (!state.styles.popper.minHeight) {
-      state.styles.popper.minHeight = `${FLIP_THRESHOLD}px`;
-    }
-
-    if (!state.styles.popper.maxWidth) {
-      state.styles.popper.maxWidth = width;
-    }
+    state.styles.popper.maxHeight ??= `${maxHeight - MODAL_MARGIN}px`;
+    state.styles.popper.minHeight ??= `${FLIP_THRESHOLD}px`;
+    state.styles.popper.maxWidth ??= maxWidth;
+    state.styles.popper.minWidth ??= minWidth;
   },
 };