From c6e84676c4fe3ca107262dc2829d6f4860d65d53 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 8 Feb 2019 17:46:32 +0100
Subject: [PATCH] mobile tweaks for input group, select fixes

---
 src/components/atoms/Content.module.scss      |  2 +-
 src/components/atoms/Form/Input.tsx           |  1 +
 .../atoms/Form/InputGroup.module.scss         | 32 +++++++++++++------
 src/data/form-publish.json                    |  4 +--
 4 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/components/atoms/Content.module.scss b/src/components/atoms/Content.module.scss
index 61d20bd..2c0860d 100644
--- a/src/components/atoms/Content.module.scss
+++ b/src/components/atoms/Content.module.scss
@@ -1,7 +1,7 @@
 @import '../../styles/variables';
 
 .content {
-    padding: 0 $spacer / 2;
+    padding: 0 $spacer / 1.5;
     max-width: $break-point--small;
     margin: 0 auto;
 
diff --git a/src/components/atoms/Form/Input.tsx b/src/components/atoms/Form/Input.tsx
index e1bb2c5..6ed0688 100644
--- a/src/components/atoms/Form/Input.tsx
+++ b/src/components/atoms/Form/Input.tsx
@@ -52,6 +52,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
             return (
                 <div className={this.inputWrapClasses()}>
                     <select className={styles.select} {...props}>
+                        <option value="none">---</option>
                         {props.options &&
                             props.options.map(
                                 (option: string, index: number) => (
diff --git a/src/components/atoms/Form/InputGroup.module.scss b/src/components/atoms/Form/InputGroup.module.scss
index 055ffdc..135e3d5 100644
--- a/src/components/atoms/Form/InputGroup.module.scss
+++ b/src/components/atoms/Form/InputGroup.module.scss
@@ -1,21 +1,35 @@
 @import '../../../styles/variables';
 
 .inputGroup {
-    display: flex;
     width: 100%;
 
+    @media screen and (min-width: $break-point--small) {
+        display: flex;
+    }
+
     > input {
-        width: 75%;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
+        @media screen and (min-width: $break-point--small) {
+            width: 75%;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
     }
 
     > button {
-        width: 25%;
-        height: 100%;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        box-shadow: none;
+        width: 100%;
+        position: absolute;
+        left: 0;
+        bottom: -120%;
+
+        @media screen and (min-width: $break-point--small) {
+            position: relative;
+            bottom: auto;
+            width: 25%;
+            height: 100%;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            box-shadow: none;
+        }
 
         &:hover,
         &:focus {
diff --git a/src/data/form-publish.json b/src/data/form-publish.json
index 309c3b0..1773f0e 100644
--- a/src/data/form-publish.json
+++ b/src/data/form-publish.json
@@ -38,14 +38,13 @@
       "label": "Type",
       "type": "select",
       "required": true,
-      "options": ["", "Data set", "Algorithm", "Container", "Workflow", "Other"]
+      "options": ["Data set", "Algorithm", "Container", "Workflow", "Other"]
     },
     "license": {
       "label": "License",
       "type": "select",
       "required": true,
       "options": [
-        "No License Specified",
         "Public Domain",
         "CC BY: Attribution",
         "CC BY-SA: Attribution ShareAlike",
@@ -66,7 +65,6 @@
       "type": "select",
       "required": true,
       "options": [
-        "",
         "Image Recognition",
         "Dataset Of Datasets",
         "Language",