From 430547f821faa3c8c6725bc43305ce1d9a853e4b Mon Sep 17 00:00:00 2001
From: Sebastian Hugentobler <sebastian@vanwa.ch>
Date: Sat, 26 Mar 2022 16:13:18 +0100
Subject: [PATCH] fix layout switching between grid and flexbox

---
 http-client/src/components/account.rs |  6 +++---
 http-client/styles.css                | 24 +++++++++++++++++-------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/http-client/src/components/account.rs b/http-client/src/components/account.rs
index d913797..8d66bb7 100644
--- a/http-client/src/components/account.rs
+++ b/http-client/src/components/account.rs
@@ -159,9 +159,9 @@ impl Component for Account {
                                 </select>
                             </div>
 
-                            <button onclick={on_deposit} class={classes!("account__button")} disabled={!self.amount_valid}>{"deposit"}</button>
-                            <button onclick={on_withdraw} class={classes!("account__button")} disabled={!self.amount_valid}>{"withdraw"}</button>
-                            <button onclick={on_transfer} class={classes!("account__button")} disabled={!self.amount_valid || !self.is_transfer_account_valid()}>{"transfer"}</button>
+                            <button onclick={on_deposit} class={classes!("account__button", "account__deposit")} disabled={!self.amount_valid}>{"deposit"}</button>
+                            <button onclick={on_withdraw} class={classes!("account__button", "account__withdraw")} disabled={!self.amount_valid}>{"withdraw"}</button>
+                            <button onclick={on_transfer} class={classes!("account__button", "account__transfer")} disabled={!self.amount_valid || !self.is_transfer_account_valid()}>{"transfer"}</button>
                         </fieldset>
                     </section>
             </>
diff --git a/http-client/styles.css b/http-client/styles.css
index c8c0214..6487a2b 100644
--- a/http-client/styles.css
+++ b/http-client/styles.css
@@ -48,6 +48,21 @@ html, body {
     flex-direction: column;
 }
 
+.account__deposit {
+    grid-column: 1;
+    grid-row: 2;
+}
+
+.account__withdraw {
+    grid-column: 2;
+    grid-row: 2;
+}
+
+.account__transfer {
+    grid-column: 3;
+    grid-row: 2;
+}
+
 .account__button {
     color: black;
     border-radius: 0;
@@ -117,12 +132,7 @@ html, body {
 
 @media (max-width: 605px) {
     .account__grid {
-        display: grid;
-        grid-template-columns: 1fr;
-    }
-
-    .account__accounts {
-        grid-column: 1;
-        grid-row: 2;
+        display: flex;
+        flex-direction: column;
     }
 }