refactor: drop mobile keyboard/viewport hacks, rely on browser
Remove body position:fixed lock, visualViewport listener in MainLayout (keyboard-inset heuristics, scroll-to-zero lock, focusin/focusout RAF), [data-keyboard-avoid-active] translateY rule, and related CSS vars (--oc-keyboard-inset, --oc-keyboard-avoid-offset, --oc-keyboard-home-indicator, --oc-visual-viewport-offset-top). Strip data-keyboard-avoid* attrs and keyboardAvoid props from Dialog/ScrollableOverlay and consumers. Drop isKeyboardOpen from useUIStore. With body unlocked and the layout plain flex-col (h-dvh), the browser shrinks the viewport on keyboard open naturally — composer sits above the keyboard, header stops lagging, input no longer jitters. FilesView.nudgeEditorSelectionAboveKeyboard now derives the occluded bottom locally from visualViewport + documentElement.clientHeight.
This commit is contained in:
@@ -165,16 +165,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Prevent iOS keyboard from scrolling the page */
|
||||
:root.device-mobile:not(.desktop-runtime) body,
|
||||
:root.device-mobile:not(.desktop-runtime) #root {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
|
||||
/* Fix main layout container */
|
||||
:root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-screen {
|
||||
height: 100vh;
|
||||
@@ -182,16 +172,6 @@
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Fix header positioning */
|
||||
:root.device-mobile:not(.desktop-runtime) .header-safe-area {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: auto;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Fix main content area */
|
||||
:root.mobile-pointer:not(.desktop-runtime) .flex-1.overflow-hidden {
|
||||
min-height: 0;
|
||||
@@ -287,22 +267,6 @@
|
||||
padding-bottom: var(--oc-safe-area-bottom-visual);
|
||||
}
|
||||
|
||||
/* iOS keyboard home indicator safe area - used when keyboard is open */
|
||||
:root.device-mobile:not(.desktop-runtime) .ios-keyboard-safe-area {
|
||||
padding-bottom: calc(var(--oc-keyboard-home-indicator, 34px) + var(--oc-safe-area-bottom-visual, 0px)) !important;
|
||||
}
|
||||
|
||||
/* Prevent keyboard-induced page scroll on iOS PWA */
|
||||
:root.device-mobile:not(.desktop-runtime) body {
|
||||
min-height: 100vh;
|
||||
min-height: -webkit-fill-available;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
|
||||
/* Fix iOS viewport issues */
|
||||
:root.device-mobile:not(.desktop-runtime) .flex.flex-col.h-screen {
|
||||
min-height: 100vh;
|
||||
|
||||
Reference in New Issue
Block a user