From fd795df8ac7aef0441c64a8ea2013cab8ebec909 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 8 Aug 2025 15:00:51 +0200
Subject: [PATCH] refactor: Enhance layout structure in ChatComponent for
 improved responsiveness

- Update the layout of the peer list and scrolling area to utilize flex properties, ensuring better responsiveness and clarity.
- Adjust the structure of the ChatComponent to maintain consistent spacing and alignment across different screen sizes.
---
 src/components/nostr/ChatComponent.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/nostr/ChatComponent.vue b/src/components/nostr/ChatComponent.vue
index 9f64e02..8d95a01 100644
--- a/src/components/nostr/ChatComponent.vue
+++ b/src/components/nostr/ChatComponent.vue
@@ -21,8 +21,8 @@
       </div>
 
       <!-- Peer List -->
-      <div class="flex-1 overflow-hidden">
-        <div class="p-4 border-b">
+      <div class="flex-1 flex flex-col overflow-hidden">
+        <div class="p-4 border-b flex-shrink-0">
           <div class="flex items-center justify-between mb-2">
             <h3 class="font-medium">Peers ({{ filteredPeers.length }})</h3>
             <span v-if="isSearching" class="text-xs text-muted-foreground">
@@ -52,7 +52,7 @@
             </div>
           </div>
         </div>
-        <ScrollArea class="h-full">
+        <ScrollArea class="flex-1">
           <div class="p-2 space-y-1">
             <!-- No results message -->
             <div v-if="isSearching && filteredPeers.length === 0" class="text-center py-8 text-muted-foreground">
@@ -192,8 +192,8 @@
       <!-- Main Content -->
       <div class="flex flex-1 overflow-hidden">
         <!-- Peer List -->
-        <div class="w-80 border-r bg-muted/30">
-          <div class="p-4 border-b">
+        <div class="w-80 border-r bg-muted/30 flex flex-col">
+          <div class="p-4 border-b flex-shrink-0">
             <div class="flex items-center justify-between mb-2">
               <h3 class="font-medium">Peers ({{ filteredPeers.length }})</h3>
               <span v-if="isSearching" class="text-xs text-muted-foreground">
@@ -223,7 +223,7 @@
               </div>
             </div>
           </div>
-          <ScrollArea class="h-full">
+          <ScrollArea class="flex-1">
             <div class="p-2 space-y-1">
               <!-- No results message -->
               <div v-if="isSearching && filteredPeers.length === 0" class="text-center py-8 text-muted-foreground">