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:
@@ -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...")}
|
||||
|
||||
Reference in New Issue
Block a user