From 6ef7f293485fd20c592963ead136fd60f2a85352 Mon Sep 17 00:00:00 2001
From: Gabriel Jablonski <gabriel@fazer.ai>
Date: Mon, 4 May 2026 22:20:31 -0300
Subject: [PATCH] fix(compose-conversation): allow modal to shrink on narrow
 viewports (#280)

Wrappers around the conversation/group forms had a hardcoded w-[42rem] without min-w-0, so on viewports below 672px the modal overflowed both sides. The forms themselves also forced w-[42rem] on a flex-col cross axis, which kept overflowing the wrapper after it shrank. Add min-w-0 to the wrappers and let the forms follow the wrapper width via w-full.
---
 .../components-next/NewConversation/ComposeConversation.vue   | 4 ++--
 .../NewConversation/components/ComposeNewConversationForm.vue | 2 +-
 .../NewConversation/components/ComposeNewGroupForm.vue        | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
index dbd34800a..ec86d610a 100644
--- a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
@@ -383,7 +383,7 @@ useKeyboardEvents(keyboardEvents);
       <div
         v-if="!isGroupMode"
         :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
-        class="w-[42rem] flex flex-col"
+        class="w-[42rem] flex flex-col min-w-0"
       >
         <div
           v-if="hasGroupInboxes"
@@ -442,7 +442,7 @@ useKeyboardEvents(keyboardEvents);
       <div
         v-else
         :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
-        class="w-[42rem] flex flex-col"
+        class="w-[42rem] flex flex-col min-w-0"
       >
         <div
           class="flex gap-1 px-4 pt-3 pb-0 bg-n-alpha-3 border border-b-0 border-n-strong backdrop-blur-[100px] rounded-t-xl"
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
index d59491d01..796498883 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
@@ -335,7 +335,7 @@ useKeyboardEvents({
 
 <template>
   <div
-    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
+    class="w-full divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
   >
     <div class="flex-1 overflow-y-auto divide-y divide-n-strong">
       <ContactSelector
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewGroupForm.vue b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewGroupForm.vue
index 2b8c370f6..6447a894a 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewGroupForm.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewGroupForm.vue
@@ -162,7 +162,7 @@ defineExpose({ resetForm });
 
 <template>
   <div
-    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
+    class="w-full divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
   >
     <div class="flex-1 divide-y divide-n-strong overflow-visible">
       <div