Make namespace drop down take full width

scm-ui/ui-components/src/OverviewPageActions.tsx

@@ -43,6 +43,7 @@ class OverviewPageActions extends React.Component<Props> {
     const groupSelector = groups && (
       <div className={"column is-flex"}>
         <DropDown
+          className={"is-fullwidth"}
           options={groups}
           preselectedOption={currentGroup}
           optionSelected={groupSelected}

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -912,6 +912,7 @@ exports[`Storyshots BranchSelector Default 1`] = `
             className="is-fullwidth select"
           >
             <select
+              className="DropDown__FullWidthSelect-jjsyoc-0 cHVjbs"
               disabled={false}
               onChange={[Function]}
               value=""
@@ -44317,6 +44318,7 @@ exports[`Storyshots Forms|DropDown Add preselect if missing in options 1`] = `
   className="select"
 >
   <select
+    className="DropDown__FullWidthSelect-jjsyoc-0 cHVjbs"
     onChange={[Function]}
     value="D"
   >
@@ -44353,6 +44355,7 @@ exports[`Storyshots Forms|DropDown Default 1`] = `
   className="select"
 >
   <select
+    className="DropDown__FullWidthSelect-jjsyoc-0 cHVjbs"
     onChange={[Function]}
     value="de"
   >
@@ -44383,6 +44386,7 @@ exports[`Storyshots Forms|DropDown With Translation 1`] = `
   className="select"
 >
   <select
+    className="DropDown__FullWidthSelect-jjsyoc-0 cHVjbs"
     onChange={[Function]}
     value="dirk"
   >

scm-ui/ui-components/src/forms/DropDown.tsx

@@ -23,6 +23,7 @@
  */
 import React, { ChangeEvent } from "react";
 import classNames from "classnames";
+import styled from "styled-components";
 
 type Props = {
   options: string[];
@@ -33,6 +34,10 @@ type Props = {
   disabled?: boolean;
 };
 
+const FullWidthSelect = styled.select`
+  width: 100%;
+`;
+
 class DropDown extends React.Component<Props> {
   render() {
     const { options, optionValues, preselectedOption, className, disabled } = this.props;
@@ -43,7 +48,7 @@ class DropDown extends React.Component<Props> {
 
     return (
       <div className={classNames(className, "select", disabled ? "disabled" : "")}>
-        <select value={preselectedOption ? preselectedOption : ""} onChange={this.change} disabled={disabled}>
+        <FullWidthSelect value={preselectedOption ? preselectedOption : ""} onChange={this.change} disabled={disabled}>
           {options.map((option, index) => {
             const value = optionValues && optionValues[index] ? optionValues[index] : option;
             return (
@@ -52,7 +57,7 @@ class DropDown extends React.Component<Props> {
               </option>
             );
           })}
-        </select>
+        </FullWidthSelect>
       </div>
     );
   }