UX: Fix composer position on iPads with a hardware keyboard

Adds padding to the composer when the keyboard accessory bar is shown (i.e. submit button no longer hides behind said bar)

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

@@ -156,6 +156,23 @@ export default Component.extend(KeyEnterEscape, {
       "--composer-vh",
       `${composerVH}px`
     );
+
+    const viewportWindowDiff =
+      window.innerHeight - window.visualViewport.height;
+
+    // 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
+    if (viewportWindowDiff > 0 && viewportWindowDiff < 75) {
+      document.documentElement.style.setProperty(
+        "--composer-ipad-padding",
+        `${viewportWindowDiff}px`
+      );
+    } else {
+      document.documentElement.style.setProperty(
+        "--composer-ipad-padding",
+        "0px"
+      );
+    }
   },
 
   didInsertElement() {

app/assets/stylesheets/common/base/compose.scss

@@ -18,7 +18,7 @@
   }
   z-index: z("composer", "content");
   transition: height 250ms ease, background 250ms ease, transform 250ms ease,
-    max-width 250ms ease;
+    max-width 250ms ease, padding-bottom 250ms ease;
   background-color: $secondary;
   box-shadow: shadow("composer");
 
@@ -496,3 +496,9 @@ body.ios-safari-composer-hacks {
     }
   }
 }
+
+body:not(.ios-safari-composer-hacks) {
+  #reply-control.open {
+    padding-bottom: var(--composer-ipad-padding);
+  }
+}