make the layout more responsive

http-client/src/components/main.rs

@@ -99,8 +99,10 @@ impl Component for Main {
                     <h1 class={classes!("title")}>
                         {"welcome to your vaults"}
                     </h1>
+                    <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>
             </>
         }

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;