From de91ad9367473d57118d4492c79275c872473b24 Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Sun, 13 Apr 2025 18:25:55 +0200
Subject: [PATCH] feat: Move result to tab content

---
 public/index.html | 28 ++++++++++++++--------------
 src/main.scss     |  3 +++
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/public/index.html b/public/index.html
index 74876a2..a4c83ee 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,8 @@
     <meta charset="UTF-8">
     <title>Käfigrechner</title>
     <meta content="width=device-width, initial-scale=1" name="viewport"/>
-    <meta name="description" content="Rechner für die Größe eines Rattenkäfigs basierend auf den Empfehlungen des VdRD e.V.">
+    <meta name="description"
+          content="Rechner für die Größe eines Rattenkäfigs basierend auf den Empfehlungen des VdRD e.V.">
     <meta name="keywords" content="Farbratten, Käfig, Ratten, Rechner, Rat, Calculator, Cage">
     <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
@@ -61,8 +62,8 @@
         <p>Here is a list of cages you can get.</p>
     </div>
     <div class="" data-content-id="3">
-        <div class="card" id="container-cages">
-            <div class="card-content" id="card-ManualMeasurements">
+        <div class="card">
+            <div class="card-content">
                 <h2 class="title is-4"><label data-i18n-key="cage-measurements"
                                               for="form-cage-measurements">Käfigmaße</label></h2>
                 <form id="form-cage-measurements" class="form-measurements">
@@ -91,7 +92,6 @@
                             </span>
                     </p>
 
-
                     <div class="columns">
                         <div class="column">
                             <label for="numFullFloors" class="label"
@@ -120,16 +120,16 @@
                 </form>
             </div>
         </div>
-    </div>
-</div>
-
-
-<div class="card">
-    <div class="card-header">
-        <h2 class="title is-3" data-i18n-key="result">Ergebnis</h2>
-    </div>
-    <div class="card-content">
-        <div id="resultsDiv"></div>
+        <div class="card-footer is-fullwidth">
+            <div class="card" id="result-card">
+                <div class="card-header">
+                    <h2 class="card-header-title is-3 is-centered" data-i18n-key="result">Ergebnis</h2>
+                </div>
+                <div class="card-content">
+                    <div id="resultsDiv"></div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 
diff --git a/src/main.scss b/src/main.scss
index 7f0fb23..6e049bb 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -28,6 +28,9 @@ body {
   padding: 5px;
 }
 
+#result-card {
+  width: 100%;
+}
 
 // Import the Google Font
 @import url("https://fonts.googleapis.com/css?family=Nunito:400,700");