refactor: simplify mobile keyboard handling

Removed fragile global keyboard viewport manager
Restored native mobile viewport behavior
Fixed textarea content shifting outside inputs
This commit is contained in:
Bohdan Triapitsyn
2026-04-26 17:44:33 +03:00
parent be723fa58b
commit 6176ee2b0f
9 changed files with 7 additions and 329 deletions
+3 -15
View File
@@ -32,7 +32,6 @@ const setRootDeviceAttributes = (
isTauriShellRuntime: boolean,
deviceType: DeviceType,
hasTouchInput: boolean,
isAndroid: boolean,
) => {
if (typeof window === 'undefined') {
return;
@@ -42,7 +41,7 @@ const setRootDeviceAttributes = (
const isMobile = deviceType === 'mobile';
const isTablet = deviceType === 'tablet';
root.classList.remove('device-mobile', 'device-tablet', 'device-desktop', 'device-android');
root.classList.remove('device-mobile', 'device-tablet', 'device-desktop');
root.classList.add(
deviceType === 'mobile'
? 'device-mobile'
@@ -61,9 +60,6 @@ const setRootDeviceAttributes = (
root.classList.remove('mobile-pointer');
} else {
root.classList.remove('desktop-runtime');
if (isAndroid) {
root.classList.add('device-android');
}
root.style.setProperty('--is-mobile', isMobile ? '1' : '0');
root.style.setProperty('--device-type', deviceType);
root.style.setProperty('--font-scale', isMobile ? '0.9' : isTablet ? '0.95' : '1');
@@ -85,8 +81,6 @@ export function getDeviceInfo(): DeviceInfo {
const prefersCoarsePointer = pointerQuery?.matches ?? false;
const noHover = hoverQuery?.matches ?? false;
const maxTouchPoints = typeof navigator !== 'undefined' ? navigator.maxTouchPoints ?? 0 : 0;
const isAndroid = typeof navigator !== 'undefined' && /Android/i.test(navigator.userAgent);
const isDesktopShellRuntime = isDesktopShell();
const hasTouchInput = prefersCoarsePointer || noHover || maxTouchPoints > 0;
@@ -113,7 +107,7 @@ export function getDeviceInfo(): DeviceInfo {
deviceType = 'desktop';
}
setRootDeviceAttributes(isDesktopShellRuntime, deviceType, hasTouchInput, !isDesktopShellRuntime && isAndroid);
setRootDeviceAttributes(isDesktopShellRuntime, deviceType, hasTouchInput);
let breakpoint: keyof typeof BREAKPOINTS = 'xs';
for (const [key, value] of Object.entries(BREAKPOINTS)) {
@@ -225,14 +219,8 @@ export function useDeviceInfo(): DeviceInfo {
const prefersCoarsePointer = pointerQuery?.matches ?? false;
const noHover = hoverQuery?.matches ?? false;
const maxTouchPoints = typeof navigator !== 'undefined' ? navigator.maxTouchPoints ?? 0 : 0;
const isAndroid = typeof navigator !== 'undefined' && /Android/i.test(navigator.userAgent);
const hasTouchInput = prefersCoarsePointer || noHover || maxTouchPoints > 0;
setRootDeviceAttributes(
isDesktopShellRuntime,
deviceInfo.deviceType,
hasTouchInput,
!isDesktopShellRuntime && isAndroid,
);
setRootDeviceAttributes(isDesktopShellRuntime, deviceInfo.deviceType, hasTouchInput);
}, [deviceInfo.deviceType, deviceInfo.hasTouchInput]);
return deviceInfo;