From 5c6efc8f7a92b474a550c6e75a038528f0997f07 Mon Sep 17 00:00:00 2001
From: Mao Nakamoto <maonakamoto@users.noreply.github.com>
Date: Sat, 29 Aug 2026 12:08:01 +0000
Subject: [PATCH] fix(messages): make New Message modal full-screen below md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Visitor feedback on /messages at 320x800: the New Message modal's
search-result rows shared screen space with the fixed mobile bottom
nav and Ask Cat FAB in the bottom-right corner, at risk of losing taps
to whichever fixed control a row happened to land under.

The centered card (max-w-md, backdrop padding) left a corridor at the
bottom of short/narrow viewports where fixed chrome and modal content
occupied the same coordinates. Below md, the modal is now a full-bleed
sheet (h-full w-full, no rounding/border/backdrop padding) that covers
the entire viewport — nothing renders where fixed chrome could steal a
tap. The results list fills the remaining height and reserves
safe-area-inset-bottom so the last row also clears a device's home
indicator. md+ (tablet/desktop) is unchanged — verified pixel-identical
card position/size/radius/border before and after.
---
 src/components/messaging/NewConversationModal.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/messaging/NewConversationModal.tsx b/src/components/messaging/NewConversationModal.tsx
index 3d7fd1d66..d699da0af 100644
--- a/src/components/messaging/NewConversationModal.tsx
+++ b/src/components/messaging/NewConversationModal.tsx
@@ -155,14 +155,18 @@ export default function NewConversationModal({
 
   return (
     <div
-      className="fixed inset-0 z-modal bg-black/50 flex items-center justify-center p-4"
+      className="fixed inset-0 z-modal bg-black/50 flex items-center justify-center p-0 md:p-4"
       onClick={e => {
         if (e.target === e.currentTarget) {
           onClose();
         }
       }}
     >
-      <div className="w-full max-w-md overflow-hidden rounded-md border border-subtle bg-surface-page animate-in fade-in zoom-in-95 duration-200">
+      {/* Full-screen below md: a centered card left the bottom search rows
+          sharing screen space with the fixed mobile nav / Ask Cat FAB corner
+          on short phones — a full-bleed sheet removes that shared corridor
+          entirely instead of relying on winning a z-index fight every time. */}
+      <div className="flex h-full w-full flex-col overflow-hidden bg-surface-page animate-in fade-in duration-200 md:h-auto md:w-full md:max-w-md md:zoom-in-95 md:rounded-md md:border md:border-subtle">
         {/* Header */}
         <div className="p-4 border-b border-subtle flex items-center justify-between">
           <h3 className="text-lg font-semibold text-fg-primary">New Message</h3>
@@ -196,8 +200,10 @@ export default function NewConversationModal({
           </div>
         )}
 
-        {/* Results */}
-        <div className="max-h-[50vh] overflow-y-auto">
+        {/* Results — fills the remaining sheet height below md so a long
+            list scrolls within itself; safe-area padding keeps the last row
+            clear of a device's home-indicator/gesture-bar inset. */}
+        <div className="flex-1 overflow-y-auto pb-[env(safe-area-inset-bottom)] md:max-h-[50vh] md:flex-none md:pb-0">
           {loading && !creatingId ? (
             <div className="flex items-center justify-center py-12">
               <Loader2 className="w-6 h-6 animate-spin text-fg-tertiary" />