From 8c39ca3599a6266dd2dbcc2872de2439e5dc1bbd Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Wed, 17 Sep 2025 02:22:56 +0200
Subject: [PATCH] Refactor Home.vue to improve composer layout and scrolling
 behavior

- Updated the composer section to include a maximum height and overflow handling, enhancing usability by allowing users to scroll through the composer content.
- Maintained the existing functionality of the NoteComposer and RideshareComposer components, ensuring a seamless user experience.

These changes contribute to a more user-friendly interface within the Home component.
---
 src/pages/Home.vue | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 1808732..50b6c71 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -38,22 +38,24 @@
     <div class="flex-1 overflow-hidden">
       <!-- Collapsible Composer -->
       <div v-if="showComposer || replyTo" class="border-b bg-background">
-        <div class="px-4 py-3 sm:px-6">
-          <!-- Regular Note Composer -->
-          <NoteComposer
-            v-if="composerType === 'note' || replyTo"
-            :reply-to="replyTo"
-            @note-published="onNotePublished"
-            @clear-reply="onClearReply"
-            @close="onCloseComposer"
-          />
+        <div class="max-h-[70vh] overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
+          <div class="px-4 py-3 sm:px-6">
+            <!-- Regular Note Composer -->
+            <NoteComposer
+              v-if="composerType === 'note' || replyTo"
+              :reply-to="replyTo"
+              @note-published="onNotePublished"
+              @clear-reply="onClearReply"
+              @close="onCloseComposer"
+            />
 
-          <!-- Rideshare Composer -->
-          <RideshareComposer
-            v-else-if="composerType === 'rideshare'"
-            @rideshare-published="onRidesharePublished"
-            @close="onCloseComposer"
-          />
+            <!-- Rideshare Composer -->
+            <RideshareComposer
+              v-else-if="composerType === 'rideshare'"
+              @rideshare-published="onRidesharePublished"
+              @close="onCloseComposer"
+            />
+          </div>
         </div>
       </div>