From 589b844e28a98da76c6de07898fc44956a5a4c43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= <rene.pfeuffer@cloudogu.com>
Date: Tue, 8 Sep 2020 08:15:16 +0200
Subject: [PATCH] Make namespace drop down take full width

---
 scm-ui/ui-components/src/OverviewPageActions.tsx         | 1 +
 .../src/__snapshots__/storyshots.test.ts.snap            | 4 ++++
 scm-ui/ui-components/src/forms/DropDown.tsx              | 9 +++++++--
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/scm-ui/ui-components/src/OverviewPageActions.tsx b/scm-ui/ui-components/src/OverviewPageActions.tsx
index 86d7ac173b..4cbffb32ef 100644
--- a/scm-ui/ui-components/src/OverviewPageActions.tsx
+++ b/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}
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index a475ea15fd..88861f1fd9 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/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"
   >
diff --git a/scm-ui/ui-components/src/forms/DropDown.tsx b/scm-ui/ui-components/src/forms/DropDown.tsx
index c141b35cd5..e801a0c2a8 100644
--- a/scm-ui/ui-components/src/forms/DropDown.tsx
+++ b/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>
     );
   }