# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1559660739 -7200
# Node ID 2be2880ad654ceff2f773cc9ffd968078c392244
# Parent  d1bbfb9635ca37772295292da7df16475810b7d3
client: configuration: data accuracy: improved layout/style

diff -r d1bbfb9635ca -r 2be2880ad654 client/src/components/systemconfiguration/DataAccuracy.vue
--- a/client/src/components/systemconfiguration/DataAccuracy.vue	Tue Jun 04 16:54:45 2019 +0200
+++ b/client/src/components/systemconfiguration/DataAccuracy.vue	Tue Jun 04 17:05:39 2019 +0200
@@ -5,11 +5,11 @@
     </h5>
     <div class="px-3 container-fluid">
       <div class="row">
-        <div class="col-sm-6">
+        <div class="col-sm-6 d-flex flex-column">
           <h6 class="font-weight-bold">
             <translate>Currency of Bottleneck Surveys</translate>
           </h6>
-          <div class="d-flex text-center small">
+          <div class="d-flex flex-grow-1 text-center small">
             <div class="card rounded-left">
               <div class="card-header text-white bg-success">OK</div>
               <div
@@ -52,11 +52,11 @@
             </div>
           </div>
         </div>
-        <div class="col-sm-6">
+        <div class="col-sm-6 d-flex flex-column">
           <h6 class="font-weight-bold">
             <translate>Availability of Gauge Measurements</translate>
           </h6>
-          <div class="d-flex text-center small">
+          <div class="d-flex flex-grow-1 text-center small">
             <div class="card rounded-left">
               <div class="card-header text-white bg-success">OK</div>
               <div
@@ -112,11 +112,11 @@
             </div>
           </div>
         </div>
-        <div class="col-sm-6">
-          <h6 class="font-weight-bold">
+        <div class="col-sm-6 d-flex flex-column">
+          <h6 class="font-weight-bold mt-3">
             <translate>Gauge Forecast Confidence</translate>
           </h6>
-          <div class="d-flex text-center small">
+          <div class="d-flex flex-grow-1 text-center small">
             <div class="card rounded-left">
               <div class="card-header text-white bg-success">OK</div>
               <div
@@ -176,11 +176,11 @@
             </div>
           </div>
         </div>
-        <div class="col-sm-6">
-          <h6 class="font-weight-bold">
+        <div class="col-sm-6 d-flex flex-column">
+          <h6 class="font-weight-bold mt-3">
             <translate>Gauge Forecast vs. Reality</translate>
           </h6>
-          <div class="d-flex text-center small">
+          <div class="d-flex flex-grow-1 text-center small">
             <div class="card rounded-left">
               <div class="card-header text-white bg-success">OK</div>
               <div
@@ -246,7 +246,7 @@
       </div>
     </div>
 
-    <div class="mt-4">
+    <div class="px-3 mt-4">
       <a @click.prevent="submit" class="btn btn-info btn-sm text-white">
         <translate>Send</translate>
       </a>