Improve message rendering on webview (fix)

web/components/page-base.tsx

@@ -66,7 +66,7 @@ export function PageBase(props: {
       <GoogleOneTapLogin className="fixed bottom-12 right-4 z-[1000]"/>
       <Col
         className={clsx(
-          'pb-[58px] lg:pb-0', // bottom bar padding
+          'pb-page-base lg:pb-0', // bottom bar padding
           'text-ink-1000 mx-auto min-h-screen w-full lg:grid lg:grid-cols-12'
         )}
       >

web/pages/_app.tsx

@@ -17,6 +17,7 @@ import {Capacitor} from '@capacitor/core'
 import {StatusBar} from '@capacitor/status-bar'
 import {App} from '@capacitor/app'
 import {useRouter} from "next/navigation";
+import {Keyboard} from "@capacitor/keyboard";
 
 if (Capacitor.isNativePlatform()) {
   // Only runs on iOS/Android native
@@ -70,6 +71,19 @@ function MyApp({Component, pageProps}: AppProps<PageProps>) {
   useHasLoaded()
   const router = useRouter()
 
+  useEffect(() => {
+    if (!Capacitor.isNativePlatform()) return
+    const onShow = () => document.body.classList.add('keyboard-open');
+    const onHide = () => document.body.classList.remove('keyboard-open');
+
+    Keyboard.addListener('keyboardWillShow', onShow);
+    Keyboard.addListener('keyboardWillHide', onHide);
+
+    return () => {
+      Keyboard.removeAllListeners();
+    };
+  }, []);
+
   useEffect(() => {
     initTracking()
 

web/pages/messages/[channelId].tsx

@@ -294,7 +294,7 @@ export const PrivateChat = (props: {
           </Modal>
         )}
       </Row>
-      <Col className="relative h-[calc(100dvh-213px-env(safe-area-inset-bottom))]  lg:h-[calc(100dvh-184px)] xl:px-0">
+      <Col className="relative h-[calc(100dvh-210px-var(--hloss))] lg:h-[calc(100dvh-184px-var(--hloss))] xl:px-0">
         <div
           ref={outerDiv}
           className="relative h-full overflow-y-auto"

web/styles/globals.css

@@ -5,6 +5,46 @@
 :root {
     /*--font-main: "Crimson Pro", "EB Garamond", Georgia, "Times New Roman", Times, serif;*/
     --font-main: "Atkinson Hyperlegible Next", Georgia, "Times New Roman", Times, serif;
+    --bnh: env(safe-area-inset-bottom); /* native bottom nav height */
+    --tnh: env(safe-area-inset-top); /* native top nav height */
+    --hloss: calc(var(--bnh) + var(--tnh)); /* mobile height loss due to native top and bottom bars */
+}
+
+.safe-top {
+    /*padding-top: calc(20px);*/
+    padding-top: env(safe-area-inset-top);
+    box-sizing: border-box; /* ensure padding doesn’t break layout */
+}
+
+.safe-bottom {
+    /*bottom: calc(48px);*/
+    bottom: env(safe-area-inset-bottom);
+}
+
+.keyboard-open .pb-page-base {
+    padding-bottom: calc(61px);
+}
+
+.pb-page-base {
+    padding-bottom: calc(61px + env(safe-area-inset-bottom));
+    /*bottom: calc(48px);*/
+    /*padding-bottom: env(safe-area-inset-bottom);*/
+}
+
+/* When keyboard is open, remove safe area offset */
+.keyboard-open .safe-bottom {
+    bottom: 0;
+}
+
+.keyboard-open {
+    --bnh: 0;
+    /*--tnh: 0;*/
+    --hloss: var(--tnh);
+}
+
+/* Replace default Tailwind behavior */
+.min-h-screen {
+    min-height: calc(1dvh * 100 - var(--hloss));
 }
 
 .main-font {
@@ -450,14 +490,3 @@ ol > li::marker {
     color: #374151;               /* pick a visible color */
 }
 
-.safe-top {
-    /*padding-top: calc(20px);*/
-    padding-top: env(safe-area-inset-top);
-    box-sizing: border-box; /* ensure padding doesn’t break layout */
-}
-
-.safe-bottom {
-    /*bottom: calc(48px);*/
-    bottom: env(safe-area-inset-bottom);
-}
-