Calculate correct position of bottom input

chat/package.json

@@ -1,12 +1,13 @@
 {
   "name": "chat",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "./src/index.tsx",
   "license": "MIT",
   "dependencies": {
     "@types/humanize-duration": "^3.27.1",
     "@types/lodash.clonedeep": "^4.5.7",
     "@types/lodash.debounce": "^4.0.7",
+    "@types/lodash.throttle": "^4.1.7",
     "@types/lozad": "^1.16.1",
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.6",
@@ -18,6 +19,7 @@
     "humanize-duration": "^3.27.3",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1",
     "lozad": "^1.16.0",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",

chat/src/App.css

@@ -51,6 +51,7 @@ body {
   position: relative;
   flex: 3;
   height: 62vh;
+  height: calc(var(--vh, 1vh) * 75);
   max-height: 1000px;
   overflow: auto;
   -ms-overflow-style: none;

chat/src/App.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from "react";
 import { DndProvider, useDrop } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import cx from "classnames";
+import throttle from "lodash.throttle";
 import {
   ChatHeading,
   ChatMessageList,
@@ -14,6 +15,7 @@ import { ChatProvider, DrawerProvider, useChat, useDrawer } from "./hooks";
 import "./App.css";
 
 const SCROLL_CANCEL_THRESHOLD = 500;
+const WINDOW_RESIZE_THROTTLE_WAIT = 250;
 
 export function App() {
   return (
@@ -36,6 +38,26 @@ function AppInner() {
   const initiallyScrolledDown = useRef(false);
   const { messages, quote } = useChat();
 
+  // See: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+  useEffect(() => {
+    const updateViewportHeightUnit = () => {
+      const vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty("--vh", `${vh}px`);
+    };
+    const throttledResizeHandler = throttle(
+      updateViewportHeightUnit,
+      WINDOW_RESIZE_THROTTLE_WAIT
+    );
+
+    throttledResizeHandler();
+
+    window.addEventListener("resize", throttledResizeHandler);
+
+    return () => {
+      window.removeEventListener("resize", throttledResizeHandler);
+    };
+  }, []);
+
   useEffect(() => {
     if (messages.length > 0) {
       if (initiallyScrolledDown.current) {

chat/yarn.lock

@@ -53,6 +53,13 @@
   dependencies:
     "@types/lodash" "*"
 
+"@types/lodash.throttle@^4.1.7":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@types/lodash.throttle/-/lodash.throttle-4.1.7.tgz#4ef379eb4f778068022310ef166625f420b6ba58"
+  integrity sha512-znwGDpjCHQ4FpLLx19w4OXDqq8+OvREa05H89obtSyXyOFKL3dDjCslsmfBz0T2FU8dmf5Wx1QvogbINiGIu9g==
+  dependencies:
+    "@types/lodash" "*"
+
 "@types/lodash@*":
   version "4.14.185"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.185.tgz#c9843f5a40703a8f5edfd53358a58ae729816908"
@@ -407,6 +414,11 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
+
 lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"