fix(select): provide max width for select popover with long labels.

- provide an upper bound max width for select popover if the
  label is very long.

Author: Brian Ochan

packages/core/src/Input/__snapshots__/index.test.tsx.snap

@@ -4379,21 +4379,12 @@ exports[`TextInput TimeInput 1`] = `
 }
 
 .c12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: 1fr auto;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
   height: 100%;
   width: 100%;
 }

packages/core/src/Select/BaseSelect.tsx

@@ -94,6 +94,10 @@ const SelectItem = styled.li<{
           }
         `};
 `
+const Item = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
 
 const NoOptionsText = styled(Typography)`
   display: flex;
@@ -169,7 +173,7 @@ const SelectOptionComponent: React.FC<SelectOption> = ({
       selected={selected && selectMarker === 'background'}
       ref={ref}
     >
-      {item}
+      <Item>{item}</Item>
     </SelectItem>
   )
 }
@@ -214,6 +218,7 @@ export const SelectPopover: React.FC<SelectPopoverProps> = ({
 
   const MAX_HEIGHT = 320
   const MIN_HEIGHT = 160
+  const MAX_MIN_WIDTH = 300
 
   const onDropdownPosition = useCallback(
     (anchorElement, popOverContainerEl) => {
@@ -224,6 +229,10 @@ export const SelectPopover: React.FC<SelectPopoverProps> = ({
       const anchorBBox = anchorElement.getBoundingClientRect()
       const { top, bottom, left, right } = anchorBBox
       popOverContainerEl.style.minWidth = `${right - left}px`
+      popOverContainerEl.style.maxWidth = `${Math.max(
+        right - left,
+        MAX_MIN_WIDTH
+      )}px`
 
       // Calculate available space above and below
       const { clientHeight } = document.documentElement

packages/core/src/Select/BaseSelectSelector.tsx

@@ -17,10 +17,9 @@ interface SelectInputProps {
 }
 
 export const SelectInsideContainer = styled.div`
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: 1fr auto;
   align-items: center;
-  justify-content: space-between;
   height: 100%;
   width: 100%;
 `

packages/core/src/Select/__snapshots__/MultiSelect.test.tsx.snap

@@ -63,21 +63,12 @@ exports[`Select Direction 1`] = `
 }
 
 .c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: 1fr auto;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
   height: 100%;
   width: 100%;
 }
@@ -463,21 +454,12 @@ exports[`Select Direction 2`] = `
 }
 
 .c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: 1fr auto;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
   height: 100%;
   width: 100%;
 }
@@ -863,21 +845,12 @@ exports[`Select Other 1`] = `
 }
 
 .c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: 1fr auto;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
   height: 100%;
   width: 100%;
 }
@@ -1270,21 +1243,12 @@ exports[`Select Other 2`] = `
 }
 
 .c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: 1fr auto;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
   height: 100%;
   width: 100%;
 }
@@ -1684,21 +1648,12 @@ exports[`Select Width 1`] = `
 }
 
 .c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: 1fr auto;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
   height: 100%;
   width: 100%;
 }
@@ -2084,21 +2039,12 @@ exports[`Select Width 2`] = `
 }
 
 .c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: 1fr auto;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
   height: 100%;
   width: 100%;
 }
@@ -2516,21 +2462,12 @@ exports[`Select Width 3`] = `
 }
 
 .c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: 1fr auto;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
   height: 100%;
   width: 100%;
 }