UX: Full height composer on mobile Android (#12709)

app/assets/javascripts/discourse/app/components/composer-body.js

@@ -1,12 +1,14 @@
 import { cancel, later, run, schedule, throttle } from "@ember/runloop";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import discourseComputed, {
+  bind,
+  observes,
+} from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import Composer from "discourse/models/composer";
 import KeyEnterEscape from "discourse/mixins/key-enter-escape";
 import afterTransition from "discourse/lib/after-transition";
 import discourseDebounce from "discourse-common/lib/debounce";
 import { headerHeight } from "discourse/components/site-header";
-import { iOSWithVisualViewport } from "discourse/lib/utilities";
 import positioningWorkaround from "discourse/lib/safari-hacks";
 
 const START_EVENTS = "touchstart mousedown";
@@ -146,12 +148,13 @@ export default Component.extend(KeyEnterEscape, {
       this.appEvents.trigger("composer:resize-started");
     });
 
-    if (iOSWithVisualViewport()) {
+    if (this._visualViewportResizing()) {
       this.viewportResize();
       window.visualViewport.addEventListener("resize", this.viewportResize);
     }
   },
 
+  @bind
   viewportResize() {
     const composerVH = window.visualViewport.height * 0.01,
       doc = document.documentElement;
@@ -159,26 +162,34 @@ export default Component.extend(KeyEnterEscape, {
     doc.style.setProperty("--composer-vh", `${composerVH}px`);
 
     const viewportWindowDiff =
-      window.innerHeight - window.visualViewport.height;
+      this.windowInnerHeight - window.visualViewport.height;
 
     viewportWindowDiff
       ? doc.classList.add("keyboard-visible")
       : doc.classList.remove("keyboard-visible");
+
     // adds bottom padding when using a hardware keyboard and the accessory bar is visible
     // accessory bar height is 55px, using 75 allows a small buffer
+    doc.style.setProperty(
+      "--composer-ipad-padding",
+      `${viewportWindowDiff < 75 ? viewportWindowDiff : 0}px`
+    );
+  },
 
-    if (viewportWindowDiff < 75) {
-      doc.style.setProperty(
-        "--composer-ipad-padding",
-        `${viewportWindowDiff}px`
-      );
-    } else {
-      doc.style.setProperty("--composer-ipad-padding", "0px");
-    }
+  _visualViewportResizing() {
+    return (
+      (this.capabilities.isIpadOS || this.site.mobileView) &&
+      window.visualViewport !== undefined
+    );
   },
 
   didInsertElement() {
     this._super(...arguments);
+
+    if (this._visualViewportResizing()) {
+      this.set("windowInnerHeight", window.innerHeight);
+    }
+
     this.setupComposerResizeEvents();
 
     const resize = () => run(() => this.resize());
@@ -199,7 +210,7 @@ export default Component.extend(KeyEnterEscape, {
   willDestroyElement() {
     this._super(...arguments);
     this.appEvents.off("composer:resize", this, this.resize);
-    if (iOSWithVisualViewport()) {
+    if (this._visualViewportResizing()) {
       window.visualViewport.removeEventListener("resize", this.viewportResize);
     }
   },

app/assets/stylesheets/mobile/compose.scss

@@ -24,7 +24,7 @@
     }
   }
 
-  body.ios-safari-composer-hacks &.open {
+  .keyboard-visible &.open {
     height: calc(var(--composer-vh, 1vh) * 100);
   }