From 87895091d88d825baa6a2c6068ba8c5b58443fb8 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 14 Sep 2025 23:46:13 +0200
Subject: [PATCH] Refactor WalletPage layout for improved responsiveness and
 user experience

- Updated the layout of WalletPage to use a flex column for better alignment on smaller screens.
- Adjusted button styles to ensure consistent sizing and spacing across different screen sizes.
- Enhanced the overall structure for a more organized presentation of wallet information.

These changes improve the usability of the WalletPage, making it more accessible on various devices.
---
 src/modules/wallet/views/WalletPage.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/modules/wallet/views/WalletPage.vue b/src/modules/wallet/views/WalletPage.vue
index 85df833..00d1720 100644
--- a/src/modules/wallet/views/WalletPage.vue
+++ b/src/modules/wallet/views/WalletPage.vue
@@ -118,24 +118,24 @@ onMounted(() => {
         <CardDescription>Available across all your wallets</CardDescription>
       </CardHeader>
       <CardContent>
-        <div class="flex items-center justify-between">
+        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
           <div class="text-3xl font-bold">
             <CurrencyDisplay :balance-msat="totalBalance" />
           </div>
-          
-          <div class="flex gap-2">
-            <Button 
-              variant="default" 
+
+          <div class="flex gap-2 w-full sm:w-auto">
+            <Button
+              variant="default"
               @click="showReceiveDialog = true"
-              class="gap-2"
+              class="gap-2 flex-1 sm:flex-none"
             >
               <QrCode class="h-4 w-4" />
               Receive
             </Button>
-            <Button 
-              variant="outline" 
+            <Button
+              variant="outline"
               @click="showSendDialog = true"
-              class="gap-2"
+              class="gap-2 flex-1 sm:flex-none"
             >
               <Send class="h-4 w-4" />
               Send