rework css a little

webapp/static/styles.css

@@ -1,35 +1,59 @@
-label,
+html {
-label input,
+  box-sizing: border-box;
-label textarea,
+}
-label select {
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+header h1 {
+    margin-left: 12px;
+}
+
+.letter-options {
+    width: 320px;
+}
+
+.letter-options label {
     display: block;
-    width: 340px;
+}
+.letter-options input,
+.letter-options textarea,
+.letter-options select {
     margin-bottom: 12px;
+    width: 100%;
+}
+
+.Collapsible {
+    background-color: #ddd;
+    border-radius: 2px;
+}
+
+
+.Collapsible__trigger {
+    padding-left: 6px;
+    cursor: pointer;
+    line-height: 24px;
+}
+
+.Collapsible__trigger.is-closed:before {
+    content: "> ";
+}
+
+.Collapsible__trigger.is-open:before {
+    content: "< ";
 }
 
 .Collapsible {
     margin-bottom: 12px;
 }
 
-.Collapsible__contentInner label,
-.Collapsible__contentInner label input,
-.Collapsible__contentInner label textarea,
-.Collapsible__contentInner label select {
-    width: 200px;
-}
-
 .Collapsible__contentInner {
+    background-color: #fff;
     padding-top: 12px;
     padding-left: 12px;
 }
 
-.Collapsible__trigger.is-closed:before {
-    content: "> ";
-}
-.Collapsible__trigger.is-open:before {
-    content: "< ";
-}
-
 textarea {
     resize: vertical;
 }

webapp/views/components/LetterOptions.js

@@ -27,7 +27,7 @@ export default function(props) {
     ];
 
     return (
-        <div>
+        <div className="letter-options">
             <Select
                 name="template"
                 text="Vorlage"