From b402138464dff80522b9f1a99848dbbb8fb28470 Mon Sep 17 00:00:00 2001 From: riyadhafraa <49757212-riyadhafraa@users.noreply.replit.com> Date: Thu, 21 May 2026 12:43:31 +0000 Subject: [PATCH] Remove global dialog adjustments for soft keyboard Revert global CSS and JavaScript hooks that attempted to manage dialog positioning with the soft keyboard, which caused issues on desktop. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 3ea26578-1c32-4300-8404-7ae727e33444 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/qrzw3bH Replit-Helium-Checkpoint-Created: true --- artifacts/tx-os/src/App.tsx | 8 ++-- artifacts/tx-os/src/index.css | 62 +++++------------------------ artifacts/tx-os/src/pages/admin.tsx | 11 ++--- 3 files changed, 18 insertions(+), 63 deletions(-) diff --git a/artifacts/tx-os/src/App.tsx b/artifacts/tx-os/src/App.tsx index 9f838401..d5dff006 100644 --- a/artifacts/tx-os/src/App.tsx +++ b/artifacts/tx-os/src/App.tsx @@ -8,8 +8,10 @@ import { IncomingNotePopup } from "@/components/notes/incoming-note-popup"; import { useNotificationsSocket } from "@/hooks/use-notifications-socket"; import { useAudioUnlock } from "@/hooks/use-audio-unlock"; import { useAutoplayHint } from "@/hooks/use-autoplay-hint"; -import { useScrollFocusedDialogField } from "@/hooks/use-scroll-focused-dialog-field"; -import { useVisualViewportVars } from "@/hooks/use-visual-viewport-vars"; +// #625-followup: the global keyboard hooks (useScrollFocusedDialogField, +// useVisualViewportVars) were removed because they fired on touch-screen +// laptops too and broke desktop dialog layout. A more targeted approach +// will replace them. import { UpcomingMeetingAlert } from "@/components/executive-meetings/upcoming-meeting-alert"; import { PushEnablePrompt } from "@/components/push-enable-prompt"; import NotFound from "@/pages/not-found"; @@ -48,8 +50,6 @@ function NotificationsSocketBridge() { useNotificationsSocket(); useAudioUnlock(); useAutoplayHint(); - useScrollFocusedDialogField(); - useVisualViewportVars(); return null; } diff --git a/artifacts/tx-os/src/index.css b/artifacts/tx-os/src/index.css index 930d68c7..a1b4b080 100644 --- a/artifacts/tx-os/src/index.css +++ b/artifacts/tx-os/src/index.css @@ -470,58 +470,16 @@ html[dir="rtl"] .truncate { } /* - * Dialog keyboard-aware sheet override (touch devices only). - * - * History: #622/#623 tried two earlier strategies — pinning the dialog - * via a `:has(:focus)` rule sized with `100dvh`, and a JS scroll hook - * — both kept the focused field hidden behind the iOS keyboard. Two - * facts made that approach unfixable: - * 1) Safari iOS/iPadOS ignores `interactive-widget=resizes-content`, - * so `100dvh` does NOT shrink when the keyboard opens. The rule - * fired but the height it used was always the full screen, so the - * dialog still ran behind the keyboard. - * 2) The rule was also unconditional. On desktop, focusing any input - * inside a Radix `DialogContent` instantly stretched the dialog - * to `width:100vw top:0`, colliding with Radix's open-state slide - * animation transforms and rendering the dialog as a broken strip - * pinned in the top-left corner. - * - * Fix: - * • Gate the rule with `@media (any-pointer: coarse)` so the desktop - * case is untouched. - * • Drive the size from `--vv-height` / `--vv-offset-top` — CSS - * variables that `useVisualViewportVars` (in App.tsx) updates from - * `window.visualViewport` on every keyboard / chrome / orientation - * change. `visualViewport` is the one signal iOS does keep - * accurate, including in standalone PWAs. - * • Fall back to `100vh` / `0` when the vars haven't been written - * yet (first paint, or on browsers without `visualViewport`). - * - * `.dialog-vv-wrapper` is for full-screen overlay wrappers (used by - * `AdminFormDialog` and similar bespoke modals) where `role="dialog"` - * sits on a NON-fixed inner card. Adding the class to the outer - * `position: fixed` overlay makes IT shrink with the keyboard, so the - * inner card — centred inside it — stays in the visible band. + * (Reverted) Earlier attempts (#622, #623, #624) added a global + * `[role="dialog"]:has(:focus)` override + companion JS hooks to keep + * the focused field above the iOS soft keyboard. Each iteration + * regressed desktop browsers — on a touch-screen laptop the rule + * fired on every input focus and broke Radix dialog layout (narrow + * strip in the top-left). The rule, the helper class + * (`.dialog-vv-wrapper`), and the global hooks are removed here. + * Dialogs now render with their original Radix / consumer styles on + * every device. The iOS keyboard issue will be revisited with a + * targeted, per-dialog approach instead of a global override. */ -@media (any-pointer: coarse) { - [role="dialog"]:has(:is(input, textarea, select, [contenteditable="true"]):focus) { - top: var(--vv-offset-top, 0px) !important; - left: 0 !important; - right: 0 !important; - bottom: auto !important; - width: 100vw !important; - max-width: none !important; - max-height: var(--vv-height, 100vh) !important; - transform: none !important; - overflow-y: auto !important; - -webkit-overflow-scrolling: touch !important; - } - - .dialog-vv-wrapper { - top: var(--vv-offset-top, 0px) !important; - bottom: auto !important; - height: var(--vv-height, 100vh) !important; - } -} diff --git a/artifacts/tx-os/src/pages/admin.tsx b/artifacts/tx-os/src/pages/admin.tsx index 18599f1b..aaa7e7e8 100644 --- a/artifacts/tx-os/src/pages/admin.tsx +++ b/artifacts/tx-os/src/pages/admin.tsx @@ -418,7 +418,7 @@ function AdminFormDialog({ return () => window.removeEventListener("keydown", handleKey); }, [isPending, onCancel]); return ( -
+
e.stopPropagation()} >