From c98830aa63bc6caeb4cd83ea96b2a17fb841bc04 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 30 May 2018 22:23:52 +0200
Subject: [PATCH] Fix DropDown display bug

---
 .../src/routes/Community/components/People.css     |  1 +
 .../src/routes/Community/components/People.js      |  2 +-
 .../src/routes/Stories/components/Stories.css      |  5 +----
 .../src/routes/Stories/components/Stories.js       | 14 +++-----------
 client/coral-ui/components/Dropdown.css            |  1 +
 client/coral-ui/components/Option.css              |  1 +
 6 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/client/coral-admin/src/routes/Community/components/People.css b/client/coral-admin/src/routes/Community/components/People.css
index 669da480d..ac565c8f8 100644
--- a/client/coral-admin/src/routes/Community/components/People.css
+++ b/client/coral-admin/src/routes/Community/components/People.css
@@ -133,6 +133,7 @@ th.header:nth-child(2), th.header:nth-child(3) {
 
 .roleDropdown {
   width: 150px;
+  text-align: left;
 }
 
 .roleOption {
diff --git a/client/coral-admin/src/routes/Community/components/People.js b/client/coral-admin/src/routes/Community/components/People.js
index ce9a8b75a..d152f83e3 100644
--- a/client/coral-admin/src/routes/Community/components/People.js
+++ b/client/coral-admin/src/routes/Community/components/People.js
@@ -202,7 +202,7 @@ class People extends React.Component {
                         </td>
                         <td className="mdl-data-table__cell--non-numeric">
                           <Dropdown
-                            className={cn(
+                            toggleClassName={cn(
                               'talk-admin-community-people-dd-role',
                               styles.roleDropdown
                             )}
diff --git a/client/coral-admin/src/routes/Stories/components/Stories.css b/client/coral-admin/src/routes/Stories/components/Stories.css
index 28f67151d..76c3e8e7e 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.css
+++ b/client/coral-admin/src/routes/Stories/components/Stories.css
@@ -92,9 +92,6 @@
 
 .statusDropdown {
   width: 150px;
-}
-
-.statusDropdownOption {
-  min-width: 100px;
+  text-align: left;
 }
 
diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js
index ad2c7c5fc..fa0e33db5 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.js
+++ b/client/coral-admin/src/routes/Stories/components/Stories.js
@@ -22,20 +22,12 @@ class Stories extends Component {
     const closed = !!(closedAt && new Date(closedAt).getTime() < Date.now());
     return (
       <Dropdown
-        className={styles.statusDropdown}
+        toggleClassName={styles.statusDropdown}
         value={closed}
         onChange={value => this.props.onStatusChange(value, id)}
       >
-        <Option
-          value={false}
-          label={t('streams.open')}
-          className={styles.statusDropdownOption}
-        />
-        <Option
-          value={true}
-          label={t('streams.closed')}
-          className={styles.statusDropdownOption}
-        />
+        <Option value={false} label={t('streams.open')} />
+        <Option value={true} label={t('streams.closed')} />
       </Dropdown>
     );
   };
diff --git a/client/coral-ui/components/Dropdown.css b/client/coral-ui/components/Dropdown.css
index 3128a8be4..400654f94 100644
--- a/client/coral-ui/components/Dropdown.css
+++ b/client/coral-ui/components/Dropdown.css
@@ -1,4 +1,5 @@
 .dropdown {
+  display: inline-block;
   position: relative;
 }
 
diff --git a/client/coral-ui/components/Option.css b/client/coral-ui/components/Option.css
index eb76df93d..cc5ac1263 100644
--- a/client/coral-ui/components/Option.css
+++ b/client/coral-ui/components/Option.css
@@ -1,4 +1,5 @@
 .option {
+  min-width: 100px;
   width: 100%;
   padding: 10px;
   outline: none;