diff --git a/src/components/ui/TextArea.tsx b/src/components/ui/TextArea.tsx index f91b4286..d61e43c7 100644 --- a/src/components/ui/TextArea.tsx +++ b/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 { diff --git a/src/context/Theme.tsx b/src/context/Theme.tsx index a348dd02..f0e6db40 100644 --- a/src/context/Theme.tsx +++ b/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 ( diff --git a/src/lib/TextAreaAutoSize.tsx b/src/lib/TextAreaAutoSize.tsx index 46c4e9f7..bfc515b0 100644 --- a/src/lib/TextAreaAutoSize.tsx +++ b/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, '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(); } diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx index f59844df..9b8cbcd6 100644 --- a/src/pages/RevoltApp.tsx +++ b/src/pages/RevoltApp.tsx @@ -41,7 +41,7 @@ export default function App() { return ( }} rightPanel={(!inSettings && inChannel) ? { width: 240, component: } : undefined} bottomNav={{ diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 3335848c..14024c16 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,3 +1,4 @@ :root { + --app-height: 100vh; --sidebar-active: var(--secondary-background); }