padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: Enhance layout structure in ChatComponent for improved responsiveness

Browse source 
- 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.
This commit is contained in:
padreug 2025-08-08 15:00:51 +02:00
parent 11fb45e527
commit fd795df8ac
1 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/nostr/ChatComponent.vue
View file

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