[dropdown-width] fix overflow issues by setting max width or setting an ellipsis

beaesguerra · beaesguerra · commit 5753294f25ae · 2025-11-26T16:24:35.000-07:00
diff --git a/packages/wonder-blocks-dropdown/src/components/action-item.tsx b/packages/wonder-blocks-dropdown/src/components/action-item.tsx
@@ -239,6 +239,8 @@ const styles = StyleSheet.create({
         lineHeight: sizing.size_200,
         whiteSpace: "nowrap",
         userSelect: "none",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
     },
 
     indent: {
diff --git a/packages/wonder-blocks-dropdown/src/components/dropdown-core.tsx b/packages/wonder-blocks-dropdown/src/components/dropdown-core.tsx
@@ -1071,6 +1071,7 @@ class DropdownCore extends React.Component<Props, State> {
 const styles = StyleSheet.create({
     menuWrapper: {
         width: "fit-content",
+        maxWidth: "100%",
     },
 
     dropdown: {
diff --git a/packages/wonder-blocks-dropdown/src/components/dropdown-popper.tsx b/packages/wonder-blocks-dropdown/src/components/dropdown-popper.tsx
@@ -99,7 +99,7 @@ const DropdownPopper = function ({
                 return (
                     <div
                         ref={ref}
-                        style={style}
+                        style={{...style, maxWidth: "100%"}}
                         data-testid="dropdown-popper"
                         data-placement={placement}
                     >

Original file line number	Diff line number	Diff line change
`@@ -99,7 +99,7 @@ const DropdownPopper = function ({`
`99`	`99`	`return (`
`100`	`100`	`<div`
`101`	`101`	`ref={ref}`
`102`		`- style={style}`
	`102`	`+ style={{...style, maxWidth: "100%"}}`
`103`	`103`	`data-testid="dropdown-popper"`
`104`	`104`	`data-placement={placement}`
`105`	`105`	`>`