Task #634: fix SendNoteDialog centering on iPad PWA with keyboard open
User-reported regression from #630: opening "Send note" on iPad PWA showed the recipient list pushed to the left side of the screen, narrower than designed, with the dialog title + search input clipped off the top. Dismissing the keyboard restored normal centered layout. Root cause: the `keyboardFallback` branch (iPad PWA, where visualViewport doesn't update) set `top: "6vh"` in *layout viewport* coordinates. On iPad PWA Safari, opening the keyboard scrolls the page down behind the keyboard, so layout-viewport `6vh` ends up above the visible visual viewport — clipping the top half of the dialog. Separately, the inline `transform` replaced Tailwind's translate-x/y on Radix's content, and without an explicit `left:50%` the animation/RTL combination shifted the box left. Fix (artifacts/tx-os/src/components/notes/send-note-dialog.tsx): - `keyboardFallback`: `top: calc(${vv.offsetTop || 0}px + 6vh)` so the anchor follows the visible visual viewport when Safari scrolls the page behind the keyboard. Add explicit `left: 50%`. Add `overflowY: auto` so if dialog content exceeds 50dvh, the dialog scrolls internally instead of clipping the header. - `keyboardActive` branch: also add explicit `left: 50%` defensively for the same animation/RTL reason (no behavior change on devices where it was already working, but eliminates the asymmetry). No changes to the shared `dialog.tsx`, composer, or executive-meetings dialog — scope strictly limited to the regression site. TypeScript: clean. Pre-existing errors in api-server/src/routes/push.ts unrelated to this diff.
This commit is contained in:
@@ -162,14 +162,31 @@ export function SendNoteDialog({
|
||||
const dialogStyle: React.CSSProperties | undefined = keyboardActive
|
||||
? {
|
||||
top: vv.offsetTop + vv.height / 2 - KEYBOARD_PREDICTION_INSET,
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
transition: "top 120ms ease",
|
||||
}
|
||||
: keyboardFallback
|
||||
? {
|
||||
top: "6vh",
|
||||
// #634: bind `top` to `visualViewport.offsetTop` so when iPad
|
||||
// PWA Safari scrolls the layout viewport down behind the
|
||||
// soft keyboard, our top anchor follows the visible area
|
||||
// instead of landing above it (which previously hid the
|
||||
// dialog title + search input).
|
||||
top: `calc(${vv.offsetTop || 0}px + 6vh)`,
|
||||
// #634: pin `left: 50%` explicitly. Radix already sets it
|
||||
// via Tailwind, but the inline `transform` below replaces
|
||||
// Tailwind's `translate-x-[-50%] translate-y-[-50%]` so we
|
||||
// also restate the horizontal anchor to defend against any
|
||||
// animation/RTL interplay that was shifting the box left.
|
||||
left: "50%",
|
||||
transform: "translate(-50%, 0)",
|
||||
maxHeight: "50dvh",
|
||||
// #634: allow the dialog itself to scroll when its content
|
||||
// is taller than the cap — otherwise the header could be
|
||||
// clipped while only the bottom of the list/buttons stayed
|
||||
// visible.
|
||||
overflowY: "auto",
|
||||
transition: "top 120ms ease, transform 120ms ease",
|
||||
}
|
||||
: undefined;
|
||||
|
||||
Reference in New Issue
Block a user