From ec26dc51cdd6838f6c038f424fbdb7cbe13a7767 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 31 Jan 2024 14:41:12 +0100
Subject: [PATCH] UX: shows PWA/Hub footer navigation on chat (#25501)

This commit sets a default of 0px for `--footer-nav-height` and set it only when `body.footer-nav-visible` allowing us to safely use `--footer-nav-height` wherever it will be needed if set.
---
 app/assets/stylesheets/common/base/menu-panel.scss       | 2 +-
 app/assets/stylesheets/common/components/footer-nav.scss | 4 +++-
 app/assets/stylesheets/common/loading-slider.scss        | 2 +-
 .../assets/stylesheets/common/chat-height-mixin.scss     | 9 ++++++---
 plugins/chat/assets/stylesheets/mobile/base-mobile.scss  | 4 ----
 plugins/chat/assets/stylesheets/mobile/chat-footer.scss  | 4 +++-
 6 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 45e804123ca..b85235cc364 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -660,6 +660,6 @@
   height: var(--base-height);
 
   body.footer-nav-ipad & {
-    height: calc(var(--base-height) - var(--footer-nav-height));
+    height: calc(var(--base-height) - var(--footer-nav-height, 0px));
   }
 }
diff --git a/app/assets/stylesheets/common/components/footer-nav.scss b/app/assets/stylesheets/common/components/footer-nav.scss
index 8e72f4e1399..c9bbdbad0fb 100644
--- a/app/assets/stylesheets/common/components/footer-nav.scss
+++ b/app/assets/stylesheets/common/components/footer-nav.scss
@@ -5,10 +5,12 @@
 $footer-nav-height: 49px;
 
 :root {
-  --footer-nav-height: #{$footer-nav-height};
+  --footer-nav-height: 0px;
 }
 
 body.footer-nav-visible {
+  --footer-nav-height: #{$footer-nav-height};
+
   #main-outlet {
     padding-bottom: calc(var(--footer-nav-height) + 15px);
   }
diff --git a/app/assets/stylesheets/common/loading-slider.scss b/app/assets/stylesheets/common/loading-slider.scss
index 9f37ee66da9..04b8dfdcc37 100644
--- a/app/assets/stylesheets/common/loading-slider.scss
+++ b/app/assets/stylesheets/common/loading-slider.scss
@@ -54,7 +54,7 @@
   }
 
   body.footer-nav-ipad & {
-    top: var(--footer-nav-height);
+    top: var(--footer-nav-height, 0px);
   }
 }
 
diff --git a/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss b/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss
index 5d588b36753..8d66b6cf977 100644
--- a/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss
@@ -1,15 +1,17 @@
 @mixin chat-height($inset: 0px) {
   // desktop and mobile
   // -1px is for the bottom border of the chat navbar
+
   height: calc(
     var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
-      var(--composer-height, 0px) - 1px - $inset
+      var(--composer-height, 0px) - var(--footer-nav-height, 0px) - 1px - $inset
   );
 
   // mobile with keyboard opened
   .keyboard-visible & {
     height: calc(
-      var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - 1px - $inset
+      var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
+        var(--footer-nav-height, 0px) - 1px - $inset
     );
   }
 
@@ -17,7 +19,8 @@
   .footer-nav-ipad & {
     height: calc(
       var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
-        var(--composer-height, 0px) - 1px - $inset
+        var(--composer-height, 0px) - var(--footer-nav-height, 0px) - 1px -
+        $inset
     );
   }
 }
diff --git a/plugins/chat/assets/stylesheets/mobile/base-mobile.scss b/plugins/chat/assets/stylesheets/mobile/base-mobile.scss
index 2750bcffc85..fe7af9682ff 100644
--- a/plugins/chat/assets/stylesheets/mobile/base-mobile.scss
+++ b/plugins/chat/assets/stylesheets/mobile/base-mobile.scss
@@ -10,10 +10,6 @@
 }
 
 html.has-full-page-chat {
-  .footer-nav {
-    display: none !important;
-  }
-
   body #main-outlet {
     padding: 0;
 
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-footer.scss b/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
index f95e342bd29..1908b31b2d8 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
@@ -20,7 +20,9 @@
     position: sticky;
     bottom: 0;
     left: 0;
-    padding-bottom: env(safe-area-inset-bottom);
+    padding-bottom: calc(
+      env(safe-area-inset-bottom) + var(--footer-nav-height, 0px)
+    );
 
     &__item {
       display: flex;