Improve message rendering on webview (fix)

Author: MartinBraquet

android/app/capacitor.build.gradle

@@ -10,6 +10,7 @@ android {
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-app')
+    implementation project(':capacitor-keyboard')
     implementation project(':capacitor-push-notifications')
     implementation project(':capacitor-status-bar')
     implementation project(':capgo-capacitor-social-login')

android/capacitor.settings.gradle

@@ -5,6 +5,9 @@ project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-app'
 project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
 
+include ':capacitor-keyboard'
+project(':capacitor-keyboard').projectDir = new File('../node_modules/@capacitor/keyboard/android')
+
 include ':capacitor-push-notifications'
 project(':capacitor-push-notifications').projectDir = new File('../node_modules/@capacitor/push-notifications/android')
 

package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "@capacitor/app": "7.1.0",
     "@capacitor/core": "7.4.4",
+    "@capacitor/keyboard": "7.0.3",
     "@capacitor/push-notifications": "7.0.3",
     "@capacitor/status-bar": "7.0.3",
     "@capgo/capacitor-social-login": "7.14.9",

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);
-}
-

yarn.lock

@@ -1192,6 +1192,11 @@
   dependencies:
     tslib "^2.1.0"
 
+"@capacitor/[email protected]":
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/@capacitor/keyboard/-/keyboard-7.0.3.tgz#8e05a70a386479f0cd2778fbec1adda5f6e18cee"
+  integrity sha512-BIBKjmky5rOYNhvYhNeDi0MMvjwYZ6YF9JoCYcGKvKY+XLJKtezsEL78XfOlgWZBkbfR8uq3tzktY6PqgoYLKA==
+
 "@capacitor/[email protected]":
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/@capacitor/push-notifications/-/push-notifications-7.0.3.tgz#b053f5c8db8cc8ceddda8dd9a1c744a72113e202"