From 2808fb490a4baba4dc3555942ddd3054f0fdafeb Mon Sep 17 00:00:00 2001
From: Sebastian Hugentobler <sebastian@vanwa.ch>
Date: Sat, 26 Mar 2022 16:31:43 +0100
Subject: [PATCH] make the layout more responsive

---
 http-client/src/components/main.rs |  6 ++++--
 http-client/styles.css             | 24 ++++++++++++++++++++++--
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/http-client/src/components/main.rs b/http-client/src/components/main.rs
index 078fd03..39cc525 100644
--- a/http-client/src/components/main.rs
+++ b/http-client/src/components/main.rs
@@ -99,8 +99,10 @@ impl Component for Main {
                     <h1 class={classes!("title")}>
                         {"welcome to your vaults"}
                     </h1>
-                    <Accounts account_nrs={self.account_nrs.clone()} selected_nr={self.selected_nr.clone()} />
-                    <Account balance={self.selected_balance} owner={self.selected_owner.clone()} nr={self.selected_nr.clone()} account_nrs={self.account_nrs.clone()} />
+                    <div class={classes!("inner-content")}>
+                        <Accounts  account_nrs={self.account_nrs.clone()} selected_nr={self.selected_nr.clone()} />
+                        <Account balance={self.selected_balance} owner={self.selected_owner.clone()} nr={self.selected_nr.clone()} account_nrs={self.account_nrs.clone()} />
+                    </div>
                 </main>
             </>
         }
diff --git a/http-client/styles.css b/http-client/styles.css
index 6487a2b..030d40b 100644
--- a/http-client/styles.css
+++ b/http-client/styles.css
@@ -7,12 +7,19 @@ html, body {
 }
 
 .title {
-    margin: 0;
+    margin-top: 0;
+}
+
+.inner-content {
+    display: flex;
+    justify-content: flex-start;
+    gap: 10px;
 }
 
 .account {
     border-style: solid;
     border-color: black;
+    flex-grow: 1;
 }
 
 .account__grid {
@@ -102,6 +109,9 @@ html, body {
 
 .accounts {
     list-style-type: none;
+    display: inline-block;
+    min-width: min-content;
+    margin: 0;
     padding: 0.5em;
     border-style: solid;
     border-color: black;
@@ -130,7 +140,17 @@ html, body {
     min-width: 370px;
 }
 
-@media (max-width: 605px) {
+@media (max-width: 1005px) {
+    .inner-content {
+        flex-direction: column;
+    }
+}
+
+@media (max-width: 615px) {
+    .accounts {
+        display: block;
+    }
+
     .account__grid {
         display: flex;
         flex-direction: column;