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
This commit is contained in:
riyadhafraa
2026-05-20 10:07:52 +00:00
parent 224407a317
commit 388ef108c2
@@ -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...")}