Move FocusTrap into the parent to allow scrolling list

ts/components/Stories.tsx

@@ -1,6 +1,7 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import FocusTrap from 'focus-trap-react';
 import React, { useState } from 'react';
 import classNames from 'classnames';
 import type { ConversationStoryType, StoryViewType } from './StoryListItem';
@@ -83,6 +84,7 @@ export const Stories = ({
           stories: storiesToView.stories,
         })}
       <div className="Stories__pane" style={{ width }}>
+        <FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
           <StoriesPane
             hiddenStories={hiddenStories}
             i18n={i18n}
@@ -105,6 +107,7 @@ export const Stories = ({
             stories={stories}
             toggleHideStories={toggleHideStories}
           />
+        </FocusTrap>
       </div>
       <div className="Stories__placeholder">
         <div className="Stories__placeholder__stories" />

ts/components/StoriesPane.tsx

@@ -1,7 +1,6 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import FocusTrap from 'focus-trap-react';
 import Fuse from 'fuse.js';
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
@@ -83,8 +82,7 @@ export const StoriesPane = ({
   }, [searchTerm, stories]);
 
   return (
-    <FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
-      <div>
+    <>
       <div className="Stories__pane__header">
         <button
           aria-label={i18n('back')}
@@ -130,7 +128,6 @@ export const StoriesPane = ({
         ))}
         {!stories.length && i18n('Stories__list-empty')}
       </div>
-      </div>
-    </FocusTrap>
+    </>
   );
 };