From bff5a7cb374c75e663ad5a91c07b5fbdb7b82540 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Mon, 15 Sep 2025 00:11:48 +0200
Subject: [PATCH] Refactor WalletPage layout for improved transaction display
 and responsiveness

- Enhanced the desktop layout for better space management and alignment of transaction items.
- Updated transaction description and timestamp handling for improved readability and flexibility.
- Adjusted styling for transaction amounts to ensure consistent visibility and formatting.

These changes contribute to a more organized and user-friendly interface in the WalletPage, enhancing the overall user experience.
---
 src/modules/wallet/views/WalletPage.vue | 73 +++++++++++++------------
 1 file changed, 37 insertions(+), 36 deletions(-)

diff --git a/src/modules/wallet/views/WalletPage.vue b/src/modules/wallet/views/WalletPage.vue
index d83559a..c6b0b72 100644
--- a/src/modules/wallet/views/WalletPage.vue
+++ b/src/modules/wallet/views/WalletPage.vue
@@ -240,9 +240,9 @@ onMounted(() => {
                       </div>
                     </div>
 
-                    <!-- Desktop Layout: Original horizontal layout -->
-                    <div class="hidden sm:flex items-center justify-between">
-                      <div class="flex items-center gap-4">
+                    <!-- Desktop Layout: Better space management -->
+                    <div class="hidden sm:flex items-start gap-4">
+                      <div class="flex items-center gap-3 flex-shrink-0">
                         <div
                           class="p-2 rounded-full bg-background border"
                           :class="getTransactionColor(tx.type, tx.status)"
@@ -252,46 +252,47 @@ onMounted(() => {
                             class="h-4 w-4"
                           />
                         </div>
-
-                        <div class="min-w-0 flex-1">
-                          <p class="font-medium truncate">{{ tx.description }}</p>
-                          <div class="flex items-center gap-2 text-sm text-muted-foreground">
-                            <span>{{
-                              (() => {
-                                try {
-                                  if (tx.timestamp instanceof Date && !isNaN(tx.timestamp.getTime())) {
-                                    return format(tx.timestamp, 'HH:mm')
-                                  } else if (tx.timestamp) {
-                                    // Try to parse as string or number
-                                    const date = new Date(tx.timestamp)
-                                    if (!isNaN(date.getTime())) {
-                                      return format(date, 'HH:mm')
-                                    }
-                                  }
-                                  return '--:--'
-                                } catch (error) {
-                                  console.warn('Failed to format timestamp:', tx.timestamp, error)
-                                  return '--:--'
+                        <span class="text-sm text-muted-foreground">{{
+                          (() => {
+                            try {
+                              if (tx.timestamp instanceof Date && !isNaN(tx.timestamp.getTime())) {
+                                return format(tx.timestamp, 'HH:mm')
+                              } else if (tx.timestamp) {
+                                // Try to parse as string or number
+                                const date = new Date(tx.timestamp)
+                                if (!isNaN(date.getTime())) {
+                                  return format(date, 'HH:mm')
                                 }
-                              })()
-                            }}</span>
-                            <Badge v-if="tx.tag" variant="outline" class="text-xs">
-                              {{ tx.tag }}
-                            </Badge>
-                          </div>
+                              }
+                              return '--:--'
+                            } catch (error) {
+                              console.warn('Failed to format timestamp:', tx.timestamp, error)
+                              return '--:--'
+                            }
+                          })()
+                        }}</span>
+                      </div>
+
+                      <!-- Description with flexible width -->
+                      <div class="min-w-0 flex-1">
+                        <p class="font-medium break-words leading-tight pr-2">{{ tx.description }}</p>
+                        <div class="flex items-center gap-2 text-xs text-muted-foreground mt-1">
+                          <Badge v-if="tx.tag" variant="outline" class="text-xs">
+                            {{ tx.tag }}
+                          </Badge>
+                          <span v-if="tx.fee" class="text-xs text-muted-foreground">
+                            Fee: {{ tx.fee }} sats
+                          </span>
                         </div>
                       </div>
 
-                      <div class="text-right ml-4">
+                      <!-- Amount - fixed width, always visible -->
+                      <div class="text-right flex-shrink-0 min-w-[100px]">
                         <p
-                          class="font-semibold"
+                          class="font-semibold whitespace-nowrap"
                           :class="getTransactionColor(tx.type, tx.status)"
                         >
-                          {{ tx.type === 'received' ? '+' : '-' }}
-                          {{ tx.amount.toLocaleString() }} sats
-                        </p>
-                        <p v-if="tx.fee" class="text-xs text-muted-foreground">
-                          Fee: {{ tx.fee }} sats
+                          {{ tx.type === 'received' ? '+' : '-' }}{{ tx.amount.toLocaleString() }} sats
                         </p>
                       </div>
                     </div>