style: fix statistics chart layout

2 files changed, 25 insertions, 16 deletions

diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
index b4fee3e..82b4d19 100644
--- a/src/main/resources/static/style.css
+++ b/src/main/resources/static/style.css
@@ -490,7 +490,7 @@ td.clipboard.clipped {
 
 .btn:active,
 .btn:hover {
-    filter: drop-shadow(1px 1px 1px gray) var(--dark);
+    filter: drop-shadow(0px 1px 1px var(--bg-gray)) var(--dark);
 }
 
 .btn:active {
@@ -555,15 +555,24 @@ input.inline:focus-visible {
     font-weight: bold;
 }
 
-.chart {
-    width: calc(100% - 2.4rem - 4px);
-    height: 320px;
+.charts {
+    display: grid;
+    grid-gap: 1em;
+    grid-template:
+            "a b" 28em
+            "c c" 28em / 1fr 1fr;
+}
 
-    display: inline-block;
+.charts > .grid-left {
+    grid-area: a;
 }
 
-.chart-50pc {
-    width: calc(50% - 2.4rem - 4px);
+.charts > .grid-right {
+    grid-area: b;
+}
+
+.charts > .grid-full {
+    grid-area: c;
 }
 
 .connection-display {
@@ -571,7 +580,7 @@ input.inline:focus-visible {
     grid-template-columns: 10em 16em 10em;
     place-items: center;
     width: fit-content;
-    margin: 1em 0;
+    margin: 1em auto;
 }
 
 .connection-display > * {
diff --git a/src/main/resources/templates/statistics.html b/src/main/resources/templates/statistics.html
index 98d98cc..42dbe28 100644
--- a/src/main/resources/templates/statistics.html
+++ b/src/main/resources/templates/statistics.html
@@ -18,11 +18,11 @@
             <p>
                 Anfragen zur Aktualisierung von Patientendaten durch Übermittlung eines MTB-Files.
             </p>
-            <div>
-                <div id="piechart1" class="chart chart-50pc"></div>
-                <div id="piechart2" class="chart chart-50pc"></div>
+            <div class="charts">
+                <div id="piechart1" class="chart grid-left"></div>
+                <div id="piechart2" class="chart grid-right"></div>
+                <div id="barchart" class="chart grid-full"></div>
             </div>
-            <div id="barchart" class="chart"></div>
         </section>
 
         <section>
@@ -30,11 +30,11 @@
             <p>
                 Anfragen zur Löschung von Patientendaten, wenn kein Consent vorliegt.
             </p>
-            <div>
-                <div id="piechartdel1" class="chart chart-50pc"></div>
-                <div id="piechartdel2" class="chart chart-50pc"></div>
+            <div class="charts">
+                <div id="piechartdel1" class="chart grid-left"></div>
+                <div id="piechartdel2" class="chart grid-right"></div>
+                <div id="barchartdel" class="chart grid-full"></div>
             </div>
-            <div id="barchartdel" class="chart"></div>
         </section>
 
     </main>