Add iPadOS detection and iOS detection and adjust styles

We need proper iPadOS detection so that both browsers and DiscourseHub
are covered simultaneously. Our server-side mobile detection causes
an inconsistency between Hub (who gets the "ios-device" class) and
Safari (where that class isn't added).

The frontend capabilities for `isIOS` include both iOS and iPadOS.

app/assets/javascripts/discourse/app/instance-initializers/sniff-capabilities.js

@@ -8,5 +8,13 @@ export default {
     } else {
       html.classList.add("no-touch", "discourse-no-touch");
     }
+
+    if (caps.isIpadOS) {
+      html.classList.add("ipados-device");
+    }
+
+    if (caps.isIOS) {
+      html.classList.add("ios-device");
+    }
   },
 };

app/assets/javascripts/discourse/app/lib/put-cursor-at-end.js

@@ -3,8 +3,11 @@ import { helperContext } from "discourse-common/lib/helpers";
 export default function (element) {
   const caps = helperContext().capabilities;
 
-  // testing this out, DON NOT COMMIT
-  if (caps.isIOS) {
+  // disable on iPadOS
+  // hacky, but prevents the composer from being moved off-screen
+  // when tapping an already focused element
+
+  if (caps.isIpadOS) {
     return;
   }
 

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

@@ -629,25 +629,11 @@ div.ac-wrap {
   box-sizing: border-box;
 }
 
-// for iPhones
-.keyboard-visible.ios-device {
-  .grippie,
-  html:not(.fullscreen-composer) & .toggle-fullscreen {
-    display: none;
-  }
-
-  #reply-control {
-    top: 0px;
-    &.open {
-      height: calc(var(--composer-vh, 1vh) * 100);
-    }
-  }
-}
-
-// probably should use another way to detect iPad
-.keyboard-visible.discourse-touch:not(.ios-device) {
-  #reply-control {
-    bottom: var(--software-keyboard-bottom-offset);
+.keyboard-visible.ipados-device {
+  #reply-control,
+  #reply-control.fullscreen {
+    z-index: z("ipad-header-nav") + 1;
+    bottom: var(--software-keyboard-height);
   }
 }
 

app/assets/stylesheets/common/components/footer-nav.scss

@@ -86,11 +86,6 @@ html.footer-nav-ipad {
     padding-bottom: 0; // resets safe-area-inset-bottom
   }
 
-  #reply-control,
-  #reply-control.fullscreen {
-    z-index: z("ipad-header-nav") + 1;
-  }
-
   &.docked .d-header-wrap {
     top: var(--footer-nav-height);
   }

app/assets/stylesheets/mobile/compose.scss

@@ -19,6 +19,7 @@
   }
 
   &.open {
+    max-height: 100vh;
     height: 250px;
     &.edit-title {
       height: 100%;
@@ -29,11 +30,9 @@
     height: 100%; // Android: Reduces composer jumpiness when the keyboard toggles
   }
 
-  .keyboard-visible body.ios-safari-composer-hacks &.open {
+  .keyboard-visible.ios-device &.open {
+    bottom: var(--software-keyboard-height);
     height: calc(var(--composer-vh, 1vh) * 100);
-    .reply-area {
-      padding-bottom: 6px;
-    }
   }
 
   // Firefox for Android hack