Fix page height on mobile.

Fix keyboard focus on mobile.

src/components/ui/TextArea.tsx

@@ -1,7 +1,3 @@
-// import classNames from "classnames";
-// import { memo } from "preact/compat";
-// import styles from "./TextArea.module.scss";
-// import { useState, useEffect, useRef, useLayoutEffect } from "preact/hooks";
 import styled, { css } from "styled-components";
 
 export interface TextAreaProps {

src/context/Theme.tsx

@@ -2,6 +2,7 @@ import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
 import { createGlobalStyle } from "styled-components";
 import { connectState } from "../redux/connector";
 import { Children } from "../types/Preact";
+import { useEffect } from "preact/hooks";
 import { createContext } from "preact";
 import { Helmet } from "react-helmet";
 
@@ -126,6 +127,14 @@ function Theme(props: Props) {
         ...props.options?.custom
     };
 
+    useEffect(() => {
+        const resize = () => document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`);
+        resize();
+
+        window.addEventListener('resize', resize);
+        return () => window.removeEventListener('resize', resize);
+    }, []);
+
     return (
         <ThemeContext.Provider value={theme}>
             <Helmet>

src/lib/TextAreaAutoSize.tsx

@@ -1,6 +1,7 @@
-import TextArea, { DEFAULT_LINE_HEIGHT, DEFAULT_TEXT_AREA_PADDING, TextAreaProps, TEXT_AREA_BORDER_WIDTH } from "../components/ui/TextArea";
 import { useEffect, useRef } from "preact/hooks";
 import { internalSubscribe } from "./eventEmitter";
+import { isTouchscreenDevice } from "./isTouchscreenDevice";
+import TextArea, { DEFAULT_LINE_HEIGHT, DEFAULT_TEXT_AREA_PADDING, TextAreaProps, TEXT_AREA_BORDER_WIDTH } from "../components/ui/TextArea";
 
 type TextAreaAutoSizeProps = Omit<JSX.HTMLAttributes<HTMLTextAreaElement>, 'style' | 'value'> & TextAreaProps & {
     forceFocus?: boolean
@@ -33,6 +34,7 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
             ref.current.focus();
         }
 
+        if (isTouchscreenDevice) return;
         if (autoFocus && !inputSelected()) {
             ref.current.focus();
         }

src/pages/RevoltApp.tsx

@@ -41,7 +41,7 @@ export default function App() {
     return (
         <OverlappingPanels
             width="100vw"
-            height="100vh"
+            height="var(--app-height)"
             leftPanel={inSpecial ? undefined : { width: 292, component: <LeftSidebar /> }}
             rightPanel={(!inSettings && inChannel) ? { width: 240, component: <RightSidebar /> } : undefined}
             bottomNav={{

src/styles/_variables.scss

@@ -1,3 +1,4 @@
 :root {
+    --app-height: 100vh;
     --sidebar-active: var(--secondary-background);
 }