Ensure story buttons are clickable despite being in a no-drag region

stylesheets/_global.scss

@@ -111,6 +111,7 @@ audio {
 button {
   cursor: pointer;
   font-size: inherit;
+  -webkit-app-region: no-drag;
 }
 button.grey {
   border-radius: 5px;

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

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 {

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 {

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