From 18b4f72c7ab756d414ed4a5a1be33493e8bfc83d Mon Sep 17 00:00:00 2001
From: Ivan Ortega Alba <ivanortegaalba@gmail.com>
Date: Thu, 13 Jul 2023 17:10:38 +0200
Subject: [PATCH] DS Picker: Use trigger width as min width (#71501)

---
 .../components/picker/DataSourceDropdown.tsx  |  1 -
 .../components/picker/popperModifiers.ts      | 24 ++++++++-----------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/public/app/features/datasources/components/picker/DataSourceDropdown.tsx b/public/app/features/datasources/components/picker/DataSourceDropdown.tsx
index a291dc625df..2604592c9b2 100644
--- a/public/app/features/datasources/components/picker/DataSourceDropdown.tsx
+++ b/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};
     `,
diff --git a/public/app/features/datasources/components/picker/popperModifiers.ts b/public/app/features/datasources/components/picker/popperModifiers.ts
index 276df3227dc..733ae14649e 100644
--- a/public/app/features/datasources/components/picker/popperModifiers.ts
+++ b/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;
   },
 };