From 388ef108c2aac79af268785a7c74fda92214973d Mon Sep 17 00:00:00 2001
From: riyadhafraa <49757212-riyadhafraa@users.noreply.replit.com>
Date: Wed, 20 May 2026 10:07:52 +0000
Subject: [PATCH] Adjust note sending dialog to accommodate iPad keyboard

Add logic to `send-note-dialog.tsx` to dynamically adjust the recipients list's max-height based on the visual viewport, ensuring visibility when the iPad keyboard is active.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 3443b1ba-ba66-4f71-852a-129ee45731d0
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/IO8TMSC
Replit-Helium-Checkpoint-Created: true
---
 .../src/components/notes/send-note-dialog.tsx | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/artifacts/tx-os/src/components/notes/send-note-dialog.tsx b/artifacts/tx-os/src/components/notes/send-note-dialog.tsx
index e7faefc5..9c656115 100644
--- a/artifacts/tx-os/src/components/notes/send-note-dialog.tsx
+++ b/artifacts/tx-os/src/components/notes/send-note-dialog.tsx
@@ -1,6 +1,7 @@
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Check, Search, Send } from "lucide-react";
+import { useVisualViewport } from "@/hooks/use-visual-viewport";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -42,6 +43,24 @@ export function SendNoteDialog({
   const send = useSendNote();
   const [search, setSearch] = useState("");
   const [picked, setPicked] = useState<Set<number>>(new Set());
+  // Make the recipients list shrink to fit when the iPad soft keyboard
+  // takes over the bottom half of the screen. Without this the dialog
+  // keeps its full height, gets centred under the keyboard, and the
+  // people list ends up hidden — same root cause as #581 / the toolbar
+  // fix in editable-cell.tsx (visualViewport excludes the keyboard but
+  // not the QuickType strip, so we add a 48px buffer when the keyboard
+  // is up).
+  const vv = useVisualViewport();
+  const KEYBOARD_PREDICTION_INSET = vv.keyboardInset > 0 ? 48 : 0;
+  const listMaxHeight = (() => {
+    const usable = (vv.height || window.innerHeight) - KEYBOARD_PREDICTION_INSET;
+    // Reserve ~220px for the dialog chrome (title + search input +
+    // footer + paddings) so the list never pushes the buttons off
+    // screen. Clamp to a sensible min/max so desktop keeps the old
+    // 288px (max-h-72) feel.
+    const forList = Math.max(120, Math.min(288, usable - 220));
+    return forList;
+  })();
 
   const candidates = useMemo(() => {
     const me = user?.id;
@@ -121,7 +140,10 @@ export function SendNoteDialog({
             data-testid="send-note-search"
           />
         </div>
-        <div className="max-h-72 overflow-y-auto border rounded-lg divide-y">
+        <div
+          className="overflow-y-auto border rounded-lg divide-y"
+          style={{ maxHeight: listMaxHeight }}
+        >
           {isLoading && (
             <div className="p-3 text-sm text-muted-foreground">
               {t("common.loading", "Loading...")}