From 0dad97c533955f57053a6ec1bbd8d8b9cc3b7f83 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Fri, 22 Sep 2023 14:26:53 -0400
Subject: [PATCH] style(dropdown): fix popper width

---
 .../components/src/core/Dropdown/index.stories.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/core/Dropdown/index.stories.tsx b/packages/components/src/core/Dropdown/index.stories.tsx
index 29a35b3d0..346bba59c 100644
--- a/packages/components/src/core/Dropdown/index.stories.tsx
+++ b/packages/components/src/core/Dropdown/index.stories.tsx
@@ -15,6 +15,9 @@ const Dropdown = (props: Args): JSX.Element => {
       onChange={noop}
       options={GITHUB_LABELS}
       DropdownMenuProps={{
+        PopperBaseProps: {
+          sx: { width: "300px" },
+        },
         groupBy: (option: DefaultDropdownMenuOption) =>
           option.section as string,
       }}
@@ -150,7 +153,7 @@ export const InsideModal = {
       skip: true,
     },
   },
-  render: function InsideModalComponent(): JSX.Element {
+  render: function InsideModalComponent(props: Args): JSX.Element {
     const [value, setValue] = useState<
       DefaultDropdownMenuOption | DefaultDropdownMenuOption[] | null
     >([GITHUB_LABELS[0], GITHUB_LABELS[1]]);
@@ -168,6 +171,7 @@ export const InsideModal = {
           value={value}
           multiple
           InputDropdownProps={{ sdsStyle: "square" }}
+          {...props}
         />
       </Dialog>
     );
@@ -206,6 +210,9 @@ const ControlledDropdownDemo = (props: Args): JSX.Element => {
         onChange={handleChange}
         data-testid="dropdown"
         DropdownMenuProps={{
+          PopperBaseProps: {
+            sx: { width: "300px" },
+          },
           groupBy: (option: DefaultDropdownMenuOption) =>
             option.section as string,
           title: "Github Labels",
@@ -244,6 +251,11 @@ const TestDemo = (props: Args): JSX.Element => {
       label="Click Target"
       onChange={noop}
       options={GITHUB_LABELS}
+      DropdownMenuProps={{
+        PopperBaseProps: {
+          sx: { width: "300px" },
+        },
+      }}
       {...props}
       data-testid="dropdown"
     />