UX: chat header size and alignments (#25239)

This commit:

- increased the size of chat-header-offset from 46px to 56px on mobile
- tweaked navbar padding
- Increased the gap between back button and title; this means no more perfect alignment, but I think that's perfectly fine and a fair trade off for an easier click target for the back button without fear of hitting the title

plugins/chat/assets/stylesheets/common/chat-navbar.scss

@@ -14,12 +14,6 @@
     z-index: z("composer", "content") - 1;
     padding-inline: 1rem;
 
-    .chat-drawer &,
-    .c-routes-channel-thread &,
-    .c-routes-channel-info & {
-      padding-inline: 0;
-    }
-
     &.-clickable {
       cursor: pointer;
     }

plugins/chat/assets/stylesheets/desktop/chat-navbar.scss

@@ -0,0 +1,7 @@
+.c-navbar-container {
+  .chat-drawer &,
+  .c-routes-channel-thread &,
+  .c-routes-channel-info & {
+    padding-inline: 0;
+  }
+}

plugins/chat/assets/stylesheets/desktop/index.scss

@@ -1,4 +1,5 @@
 @import "base-desktop";
+@import "chat-navbar";
 @import "chat-composer-uploads";
 @import "chat-index-drawer";
 @import "chat-index-full-page";

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

@@ -1,5 +1,6 @@
 :root {
   --channel-list-avatar-size: 38px;
+  --chat-header-offset: 56px;
 }
 
 .chat-message-container:not(.-user-info-hidden) {

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

@@ -16,7 +16,7 @@
     .back-to-forum {
       color: var(--primary);
       font-size: var(--font-up-1);
-      padding: 0.5rem 0.8rem;
+      padding: 0.5rem 0.8rem 0.5rem 0.25rem;
 
       .d-icon {
         color: var(--primary);

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

@@ -1,6 +1,11 @@
 .c-navbar {
+  gap: 0.75rem;
   &-container {
     max-width: 100vw;
     padding-inline: 0.25rem;
   }
+
+  &__back-button {
+    align-self: stretch;
+  }
 }