Allow outside click for focustrap

stylesheets/_variables.scss

@@ -258,7 +258,8 @@ $z-index-on-top-of-everything: 9000;
 // The scroll down button should be above everything in the timeline but
 // popups, tooltips, toasts, and other items should stack above it.
 $z-index-scroll-down-button: 10;
-$z-index-calling: 101;
-$z-index-above-popup: 102;
+$z-index-stories: 97;
+$z-index-calling: 98;
+$z-index-above-popup: 101;
 $z-index-calling-pip: 103;
 $z-index-above-context-menu: 126;

stylesheets/components/Stories.scss

@@ -10,7 +10,7 @@
   top: 0;
   user-select: none;
   width: 100%;
-  z-index: $z-index-popup-overlay;
+  z-index: $z-index-stories;
 
   &__pane {
     background: $color-gray-80;

ts/components/StoriesPane.tsx

@@ -83,7 +83,7 @@ export const StoriesPane = ({
   }, [searchTerm, stories]);
 
   return (
-    <FocusTrap>
+    <FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
       <div>
         <div className="Stories__pane__header">
           <button

ts/components/StoryViewer.tsx

@@ -198,7 +198,7 @@ export const StoryViewer = ({
   }, [navigateStories]);
 
   return (
-    <FocusTrap>
+    <FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
       <div className="StoryViewer">
         <div className="StoryViewer__overlay" />
         <div className="StoryViewer__content">