From 90eae2d3f1f75b5ed768eb255124b53f4c43e69a Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Fri, 16 May 2025 12:24:05 +0200
Subject: [PATCH] Chat drawer and peakmode (#161)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

To avoid very strange positioning and sizing, I'm opting to keep the
chat in front of the composer, when in peak-mode.
Still not ideal, but better than before.

![CleanShot 2025-05-14 at 13 11
16@2x](https://github.com/user-attachments/assets/9b28f097-a63b-4bbb-a016-68cbcd04ee3c)
⬇️
![CleanShot 2025-05-14 at 13 10
57@2x](https://github.com/user-attachments/assets/10b9c17e-1207-4775-8933-0f6aca8c3ab6)

Due to the way peakmode positions itself, it's impossible to place the
chat flush next to it. And due to the way resizing works (frop the top
left, anchored right), it also can't be placed on any left-handed
alignment.
---
 scss/chat.scss     | 24 ++++++++++++++++++++++++
 scss/composer.scss |  2 ++
 2 files changed, 26 insertions(+)

diff --git a/scss/chat.scss b/scss/chat.scss
index 876ec95..0a30a25 100644
--- a/scss/chat.scss
+++ b/scss/chat.scss
@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 .full-page-chat.full-page-chat-sidebar-enabled {
   border: none;
 }
@@ -23,6 +25,22 @@ body.has-full-page-chat {
 
 .chat-drawer-outlet-container {
   z-index: z("composer", "content");
+
+  .peek-mode-active & {
+    padding-bottom: 0;
+    left: unset;
+    right: var(--main-grid-gap);
+
+    &:has(.is-expanded) {
+      z-index: calc(z("composer", "dropdown") + 1);
+    }
+  }
+}
+
+.chat-drawer {
+  .peek-mode-active & {
+    max-width: 90vw;
+  }
 }
 
 .chat-drawer .channels-list-container .chat-channel-row {
@@ -56,3 +74,9 @@ body.has-full-page-chat {
 .chat-drawer-active.chat-drawer-expanded .chat-composer-dropdown__menu-content {
   z-index: z("composer", "content") + 1;
 }
+
+.chat-replying-indicator-container {
+  @include viewport.from(sm) {
+    margin-left: calc(0.65em + 0.2rem);
+  }
+}
diff --git a/scss/composer.scss b/scss/composer.scss
index 0b62ad1..cf72f26 100644
--- a/scss/composer.scss
+++ b/scss/composer.scss
@@ -19,6 +19,8 @@
 
     .grippie {
       background: var(--tertiary-low);
+      border-top-right-radius: var(--d-border-radius);
+      border-top-left-radius: var(--d-border-radius);
     }
 
     .user-selector,