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 ( -