diff --git a/scm-ui-components/packages/ui-components/src/BranchSelector.js b/scm-ui-components/packages/ui-components/src/BranchSelector.js
index d2145a8716..c5ac423fd1 100644
--- a/scm-ui-components/packages/ui-components/src/BranchSelector.js
+++ b/scm-ui-components/packages/ui-components/src/BranchSelector.js
@@ -8,10 +8,11 @@ import DropDown from "./forms/DropDown";
 
 const styles = {
   zeroflex: {
+    flexBasis: "inherit",
     flexGrow: 0
   },
-  minWidthOfLabel: {
-    minWidth: "4.5rem"
+  minWidthOfControl: {
+    minWidth: "10rem"
   },
   labelSizing: {
     fontSize: "1rem !important"
@@ -56,19 +57,10 @@ class BranchSelector extends React.Component<Props, State> {
     if (branches) {
       return (
         <div
-          className={classNames(
-            "field",
-            "is-horizontal",
-            classes.noBottomMargin
-          )}
+          className={classNames("field is-horizontal", classes.noBottomMargin)}
         >
           <div
-            className={classNames(
-              "field-label",
-              "is-normal",
-              classes.zeroflex,
-              classes.minWidthOfLabel
-            )}
+            className={classNames("field-label is-normal", classes.zeroflex)}
           >
             <label className={classNames("label", classes.labelSizing)}>
               {label}
@@ -78,7 +70,7 @@ class BranchSelector extends React.Component<Props, State> {
             <div
               className={classNames("field is-narrow", classes.noBottomMargin)}
             >
-              <div className="control">
+              <div className={classNames("control", classes.minWidthOfControl)}>
                 <DropDown
                   className="is-fullwidth"
                   options={branches.map(b => b.name)}