# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1538408460 -7200
# Node ID aae51775792324f020ac0900d8770b57e4bfdda9
# Parent  b1489669ba528d4c0237318107e8be608787eba6
fix: layout systemconfig

diff -r b1489669ba52 -r aae517757923 client/src/systemconfiguration/systemconfiguration.vue
--- a/client/src/systemconfiguration/systemconfiguration.vue	Mon Oct 01 17:29:33 2018 +0200
+++ b/client/src/systemconfiguration/systemconfiguration.vue	Mon Oct 01 17:41:00 2018 +0200
@@ -1,27 +1,37 @@
 <template>
-  <div class="d-flex flex-row">
-    <div class="card sysconfig">
-      <div class="card-header shadow-sm text-white bg-info mb-6">
-          Systemconfiguration
-      </div>
-      <div class="card-body">
-        <h4>Bottleneck Areas stroke-color</h4>
-        <compact-picker v-model="strokeColor" />
-        <h4>Bottleneck Areas fill-color</h4>
-        <chrome-picker v-model="fillColor" />
-        <div class="sendbutton">
-          <a @click.prevent="submit" class="btn btn-info">Send</a>
+    <div class="d-flex flex-row">
+        <div class="card sysconfig">
+            <div class="card-header shadow-sm text-white bg-info mb-6">
+                Systemconfiguration
+            </div>
+            <div class="card-body config">
+                <section class="configsection">
+                    <h4 class="card-title">Bottleneck Areas stroke-color</h4>
+                    <compact-picker v-model="strokeColor" />
+                </section>
+                <section>
+                    <h4 class="card-title">Bottleneck Areas fill-color</h4>
+                    <chrome-picker v-model="fillColor" />
+                </section>
+                <div class="sendbutton">
+                    <a @click.prevent="submit" class="btn btn-info">Send</a>
+                </div>
+            </div> <!-- card-body -->
         </div>
-      </div> <!-- card-body -->
     </div>
-  </div>
 </template>
 
-<style lang="scss">
+<style scoped lang="scss">
+.config {
+  text-align: left;
+}
+.configsection {
+  margin-bottom: $large-offset;
+}
 .sendbutton {
   position: absolute;
-  right: $large-offset;
-  bottom: $large-offset;
+  right: $offset;
+  bottom: $offset;
 }
 .inputs {
   margin-left: auto;
@@ -29,12 +39,9 @@
 }
 .sysconfig {
   margin-top: $offset;
-  margin-left: 30vw;
+  margin-left: auto;
   margin-right: auto;
-  width: 60vw;
-  max-width: 500px;
-  mind-heigth: 500px;
-  height: 80vh;
+  width: 30vw;
 }
 </style>