FIX: better supports ipad and hub footer nav (#25518)

Since https://github.com/discourse/discourse/pull/25501 this behavior was broken. This PR attempts to fix it by being more fine grain.

Also note that this PR is moving `footer-nav-ipad` and `footer-nav-visible` to the `html` element and not the `body`. It makes more sense as we are already adding most of other global state class like `keyboard-visible` to the `html` element.

Tested on:
- chrome desktop
- safari ios - iphone
- PWA ios - iphone
- PWA ios - ipad
- DiscourseHub iphone

app/assets/javascripts/discourse/app/components/footer-nav.js

@@ -38,13 +38,13 @@ const FooterNavComponent = MountWidget.extend(
       }
 
       if (this.capabilities.isIpadOS) {
-        document.body.classList.add("footer-nav-ipad");
+        document.documentElement.classList.add("footer-nav-ipad");
       } else {
         this.bindScrolling();
         window.addEventListener("resize", this.scrolled, false);
         this.appEvents.on("composer:opened", this, "_composerOpened");
         this.appEvents.on("composer:closed", this, "_composerClosed");
-        document.body.classList.add("footer-nav-visible");
+        document.documentElement.classList.add("footer-nav-visible");
       }
     },
 
@@ -58,7 +58,7 @@ const FooterNavComponent = MountWidget.extend(
       }
 
       if (this.capabilities.isIpadOS) {
-        document.body.classList.remove("footer-nav-ipad");
+        document.documentElement.classList.remove("footer-nav-ipad");
       } else {
         this.unbindScrolling();
         window.removeEventListener("resize", this.scrolled);
@@ -94,7 +94,7 @@ const FooterNavComponent = MountWidget.extend(
         "visible",
         this.mobileScrollDirection === null ? true : false
       );
-      document.body.classList.toggle(
+      document.documentElement.classList.toggle(
         "footer-nav-visible",
         this.mobileScrollDirection === null ? true : false
       );

app/assets/stylesheets/common/base/menu-panel.scss

@@ -659,7 +659,7 @@
 
   height: var(--base-height);
 
-  body.footer-nav-ipad & {
+  html.footer-nav-ipad & {
-    height: calc(var(--base-height) - var(--footer-nav-height, 0px));
+    height: calc(var(--base-height) - var(--footer-nav-height));
   }
 }

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

@@ -169,7 +169,7 @@ $topic-progress-height: 42px;
     }
   }
 
-  body:not(.footer-nav-visible) & {
+  html:not(.footer-nav-visible) & {
     bottom: env(safe-area-inset-bottom);
   }
 

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

@@ -5,12 +5,10 @@
 $footer-nav-height: 49px;
 
 :root {
-  --footer-nav-height: 0px;
+  --footer-nav-height: #{$footer-nav-height};
 }
 
-body.footer-nav-visible {
+html.footer-nav-visible {
-  --footer-nav-height: #{$footer-nav-height};
-
   #main-outlet {
     padding-bottom: calc(var(--footer-nav-height) + 15px);
   }
@@ -72,13 +70,13 @@ body.footer-nav-visible {
 }
 
 @supports (-webkit-backdrop-filter: blur(10px)) {
-  body:not(.footer-nav-ipad) .footer-nav {
+  html:not(.footer-nav-ipad) .footer-nav {
     background-color: rgba(var(--header_background-rgb), 0.7);
     -webkit-backdrop-filter: blur(20px);
   }
 }
 
-body.footer-nav-ipad {
+html.footer-nav-ipad {
   padding-top: var(--footer-nav-height);
   .footer-nav {
     bottom: auto;

app/assets/stylesheets/common/loading-slider.scss

@@ -53,8 +53,8 @@
     top: 1px;
   }
 
-  body.footer-nav-ipad & {
+  html.footer-nav-ipad & {
-    top: var(--footer-nav-height, 0px);
+    top: var(--footer-nav-height);
   }
 }
 

plugins/chat/assets/stylesheets/common/chat-height-mixin.scss

@@ -1,26 +1,24 @@
 @mixin chat-height($inset: 0px) {
   // desktop and mobile
   // -1px is for the bottom border of the chat navbar
-
+  $base-height: calc(
-  height: calc(
+    var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - 1px - $inset
-    var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
-      var(--composer-height, 0px) - var(--footer-nav-height, 0px) - 1px - $inset
   );
 
+  height: calc($base-height - var(--composer-height, 0px));
+
   // mobile with keyboard opened
-  .keyboard-visible & {
+  html.keyboard-visible & {
-    height: calc(
+    height: calc($base-height);
-      var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
-        var(--footer-nav-height, 0px) - 1px - $inset
-    );
   }
 
   // ipad
-  .footer-nav-ipad & {
+  html.footer-nav-ipad & {
-    height: calc(
+    height: calc($base-height - var(--composer-height, 0px));
-      var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
+  }
-        var(--composer-height, 0px) - var(--footer-nav-height, 0px) - 1px -
+
-        $inset
+  // PWA/HUB without keyboard
-    );
+  html.footer-nav-visible:not(.keyboard-visible) & {
+    height: calc($base-height - var(--footer-nav-height, 0px));
   }
 }

plugins/chat/assets/stylesheets/mobile/chat-footer.scss

@@ -20,9 +20,14 @@
     position: sticky;
     bottom: 0;
     left: 0;
+    padding-bottom: env(safe-area-inset-bottom);
+
+    html.footer-nav-ipad &,
+    html.footer-nav-visible & {
       padding-bottom: calc(
         env(safe-area-inset-bottom) + var(--footer-nav-height, 0px)
       );
+    }
 
     &__item {
       display: flex;