Merge pull request #163 from quid/fix/QUID-27293-react-dropdown-width

fix: react-dropdown width

Author: yuhsuanchuang

packages/react-dropdown/src/Categories.js

@@ -46,6 +46,7 @@ const Category = styled.main`
   display: flex;
   flex-direction: ${props => (props.twoColumn ? 'row' : 'column')};
   flex-grow: 1;
+  width: 100%;
 `;
 
 export const Divider = styled.section`

packages/react-dropdown/src/Items.js

@@ -41,6 +41,7 @@ const Items = styled.ul`
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  width: 100%;
 `;
 
 export const HIGHLIGHTED = (props: { theme: Object }) =>

packages/react-dropdown/src/__snapshots__/index.test.js.snap

@@ -73,6 +73,7 @@ exports[`renders an open dropdown 1`] = `
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
+  width: 100%;
 }
 
 .emotion-2 {
@@ -304,6 +305,7 @@ exports[`renders an open dropdown with categories 1`] = `
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
+  width: 100%;
 }
 
 .emotion-6 {
@@ -352,6 +354,7 @@ exports[`renders an open dropdown with categories 1`] = `
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
+  width: 100%;
 }
 
 .emotion-2 {
@@ -848,6 +851,7 @@ exports[`renders an open dropdown with categories and twoColumn 1`] = `
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
+  width: 100%;
 }
 
 .emotion-4 {
@@ -900,6 +904,7 @@ exports[`renders an open dropdown with categories and twoColumn 1`] = `
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
+  width: 100%;
 }
 
 .emotion-2 {
@@ -1459,6 +1464,7 @@ exports[`using arrow down should hover on element 1`] = `
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
+  width: 100%;
 }
 
 .emotion-0 {
@@ -1609,6 +1615,7 @@ exports[`using useFilter should only return items that match the input value 1`]
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
+  width: 100%;
 }
 
 .emotion-4 {