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.

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">

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");
   }
 }
 

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,

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;