From fca67117ee9ed13ad0ca6b5912d95473805a1853 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Tue, 12 Dec 2023 11:32:36 +0100
Subject: [PATCH] FIX: incorrect spacing with my threads on ios (#24843)

- sticky doesn't work well with overflow: hidden parents. These overflows were used to hide other issues which shouldn't exist anyways. If it causes issues we should fix the root cause.

- our `--header-offset` is changing a lot on safari while scrolling, sometimes with very unexpected value like: negative or very high value, which causes the navbar to appear at unexpected positions for few ms, this commit is using the value of the header on insert and not changing it after, it shouldn't cause any issue.
---
 .../javascripts/discourse/components/navbar/index.gjs     | 8 +++++++-
 plugins/chat/assets/stylesheets/common/chat-navbar.scss   | 3 +--
 plugins/chat/assets/stylesheets/mobile/base-mobile.scss   | 1 -
 plugins/chat/assets/stylesheets/mobile/chat-index.scss    | 2 --
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/navbar/index.gjs b/plugins/chat/assets/javascripts/discourse/components/navbar/index.gjs
index b342d3cee58..1f1a90b7ec9 100644
--- a/plugins/chat/assets/javascripts/discourse/components/navbar/index.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/navbar/index.gjs
@@ -1,12 +1,18 @@
 import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
 import DButton from "discourse/components/d-button";
+import { headerOffset } from "discourse/lib/offset-calculator";
 import DiscourseURL from "discourse/lib/url";
 
 export default class ChatNavbar extends Component {
   @service chatStateManager;
 
+  get topStyle() {
+    return htmlSafe(`top: ${headerOffset()}px`);
+  }
+
   @action
   async closeFullScreen() {
     this.chatStateManager.prefersDrawer();
@@ -20,7 +26,7 @@ export default class ChatNavbar extends Component {
   }
 
   <template>
-    <div class="chat-navbar-container">
+    <div class="chat-navbar-container" style={{this.topStyle}}>
       <nav class="chat-navbar">
         {{#if (has-block "current")}}
           <span class="chat-navbar__current">
diff --git a/plugins/chat/assets/stylesheets/common/chat-navbar.scss b/plugins/chat/assets/stylesheets/common/chat-navbar.scss
index 435ef752f6c..d57b8c59fee 100644
--- a/plugins/chat/assets/stylesheets/common/chat-navbar.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-navbar.scss
@@ -7,13 +7,12 @@
   &-container {
     padding-inline: 1rem;
     position: sticky;
-    top: var(--header-offset);
     border-bottom: 1px solid var(--primary-low);
     background: var(--secondary);
     height: 50px;
     box-sizing: border-box;
     display: flex;
-    z-index: z("header") - 1;
+    z-index: z("header");
   }
 }
 
diff --git a/plugins/chat/assets/stylesheets/mobile/base-mobile.scss b/plugins/chat/assets/stylesheets/mobile/base-mobile.scss
index 463462f983d..0022fbf5d3d 100644
--- a/plugins/chat/assets/stylesheets/mobile/base-mobile.scss
+++ b/plugins/chat/assets/stylesheets/mobile/base-mobile.scss
@@ -35,7 +35,6 @@ html.has-full-page-chat {
 
 .full-page-chat {
   grid-template-columns: 100%;
-  overflow-x: hidden;
   width: 100%;
 
   .btn:active,
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-index.scss b/plugins/chat/assets/stylesheets/mobile/chat-index.scss
index b5c33d61c96..7bdc6681389 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-index.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-index.scss
@@ -1,8 +1,6 @@
 @import "common/foundation/mixins";
 
 .full-page-chat {
-  overflow: hidden; //prevents double scroll
-
   .channels-list {
     overflow-y: overlay;
     padding-bottom: 6rem;