From bbfda6f4029d1781c3b66d936b3f6e448e9f5282 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 1 Mar 2022 20:59:06 +0000
Subject: [PATCH] Improve layout of balances header

---
 web/src/pages/Account.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index 6e14d9b..53932e2 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -41,25 +41,25 @@ function createReconcilationTransaction() {
 </script>
 
 <template>
-    <div class="grid grid-cols-2">
+    <div class="grid grid-cols-[1fr_auto]">
         <h1 class="inline">
             {{ accounts.CurrentAccount?.Name }}
             <EditAccount />
         </h1>
 
-        <div class="text-right">
-            <span class="border-2 rounded-lg p-1 whitespace-nowrap">
+        <div class="text-right flex flex-wrap flex-col md:flex-row justify-end gap-2 max-w-sm">
+            <span class="border-2 rounded-lg p-1 whitespace-nowrap flex-1">
                 Working:
                 <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
             </span>
 
-            <span class="border-2 rounded-lg p-1 ml-2 whitespace-nowrap">
+            <span class="border-2 rounded-lg p-1 whitespace-nowrap flex-1">
                 Cleared:
                 <Currency :value="accounts.CurrentAccount?.ClearedBalance" />
             </span>
 
             <span
-                class="border-2 border-blue-500 rounded-lg bg-blue-500 ml-2 p-1 whitespace-nowrap"
+                class="border-2 border-blue-500 rounded-lg bg-blue-500 p-1 whitespace-nowrap flex-1"
                 v-if="!transactions.Reconciling"
                 @click="transactions.Reconciling = true"
             >