From b2f5febbf9e8d4b460faacf5d173e7010ea26782 Mon Sep 17 00:00:00 2001
From: trevor-signal <131492920+trevor-signal@users.noreply.github.com>
Date: Tue, 6 Jun 2023 09:53:10 -0400
Subject: [PATCH] Ensure story buttons are clickable despite being in a no-drag
 region

---
 stylesheets/_global.scss                       | 1 +
 stylesheets/components/Button.scss             | 1 +
 stylesheets/components/ConversationHeader.scss | 2 ++
 stylesheets/components/MediaEditor.scss        | 2 ++
 ts/components/App.tsx                          | 2 +-
 5 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 284c4a961853..231b6daf9682 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -111,6 +111,7 @@ audio {
 button {
   cursor: pointer;
   font-size: inherit;
+  -webkit-app-region: no-drag;
 }
 button.grey {
   border-radius: 5px;
diff --git a/stylesheets/components/Button.scss b/stylesheets/components/Button.scss
index fa69145043eb..9cced7b58bee 100644
--- a/stylesheets/components/Button.scss
+++ b/stylesheets/components/Button.scss
@@ -27,6 +27,7 @@
   padding-inline: 16px;
   text-align: center;
   user-select: none;
+  -webkit-app-region: no-drag;
 
   @include keyboard-mode {
     @include focus-box-shadow($color-white, $color-ultramarine);
diff --git a/stylesheets/components/ConversationHeader.scss b/stylesheets/components/ConversationHeader.scss
index 468991223f51..f8794bbc7230 100644
--- a/stylesheets/components/ConversationHeader.scss
+++ b/stylesheets/components/ConversationHeader.scss
@@ -59,6 +59,8 @@
     vertical-align: text-bottom;
     border: none;
     opacity: 0;
+    // while it is invisible, allow it to be draggable
+    -webkit-app-region: drag;
     transition: margin-inline-start $transition, opacity $transition;
 
     &:disabled {
diff --git a/stylesheets/components/MediaEditor.scss b/stylesheets/components/MediaEditor.scss
index 8a7b3e77aa72..13b843f5c351 100644
--- a/stylesheets/components/MediaEditor.scss
+++ b/stylesheets/components/MediaEditor.scss
@@ -13,6 +13,8 @@
   top: var(--titlebar-height);
   position: absolute;
   user-select: none;
+  -webkit-app-region: no-drag;
+
   z-index: $z-index-popup-overlay;
 
   &__container {
diff --git a/ts/components/App.tsx b/ts/components/App.tsx
index f6a6c7992415..a350b76c8477 100644
--- a/ts/components/App.tsx
+++ b/ts/components/App.tsx
@@ -171,6 +171,7 @@ export function App({
           'dark-theme': theme === ThemeType.dark,
         })}
       >
+        {contents}
         <ToastManager
           OS={OS}
           hideToast={hideToast}
@@ -185,7 +186,6 @@ export function App({
         {isShowingStoriesView && renderStories(toggleStoriesView)}
         {hasSelectedStoryData &&
           renderStoryViewer(() => viewStory({ closeViewer: true }))}
-        {contents}
       </div>
     </TitleBarContainer>
   );