Ensure MyStories is part of the stories pane list

stylesheets/components/Stories.scss

@@ -22,20 +22,19 @@
     padding-top: calc(14px + var(--title-bar-drag-area-height));
 
     &__settings__button {
-      margin-left: 24px;
-      opacity: 1;
-      position: absolute;
-      right: 12px;
-      top: -6px;
-
-      &::after {
       @include dark-theme {
         @include color-svg(
           '../images/icons/v2/more-horiz-24.svg',
           $color-white
         );
       }
-      }
+      height: 22px;
+      margin-left: 24px;
+      opacity: 1;
+      position: absolute;
+      right: 14px;
+      top: 0px;
+      width: 22px;
     }
 
     &__header {
@@ -99,6 +98,8 @@
 
     &__list {
       @include scrollbar;
+      display: flex;
+      flex-direction: column;
       flex: 1;
       overflow-y: overlay;
       padding: 0 14px;
@@ -108,6 +109,7 @@
         align-items: center;
         color: $color-gray-45;
         display: flex;
+        flex: 1;
         flex-direction: column;
         justify-content: center;
       }
@@ -168,8 +170,4 @@
       }
     }
   }
-
-  &__my-stories {
-    padding: 0 10px;
-  }
 }

ts/components/StoriesPane.tsx

@@ -149,8 +149,12 @@ export const StoriesPane = ({
         placeholder={i18n('search')}
         value={searchTerm}
       />
+      <div className="Stories__pane__list">
+        <>
           <MyStoriesButton
-        hasMultiple={myStories.length ? myStories[0].stories.length > 1 : false}
+            hasMultiple={
+              myStories.length ? myStories[0].stories.length > 1 : false
+            }
             i18n={i18n}
             me={me}
             newestStory={
@@ -159,16 +163,11 @@ export const StoriesPane = ({
             onClick={onMyStoriesClicked}
             queueStoryDownload={queueStoryDownload}
           />
-      <div
-        className={classNames('Stories__pane__list', {
-          'Stories__pane__list--empty': !stories.length,
-        })}
-      >
           {renderedStories.map(story => (
             <StoryListItem
               conversationId={story.conversationId}
-            getPreferredBadge={getPreferredBadge}
               group={story.group}
+              getPreferredBadge={getPreferredBadge}
               i18n={i18n}
               key={story.storyView.timestamp}
               onHideStory={toggleHideStories}
@@ -187,7 +186,9 @@ export const StoriesPane = ({
                 className={classNames('Stories__hidden-stories', {
                   'Stories__hidden-stories--expanded': isShowingHiddenStories,
                 })}
-              onClick={() => setIsShowingHiddenStories(!isShowingHiddenStories)}
+                onClick={() =>
+                  setIsShowingHiddenStories(!isShowingHiddenStories)
+                }
                 type="button"
               >
                 {i18n('Stories__hidden-stories')}
@@ -196,8 +197,8 @@ export const StoriesPane = ({
                 hiddenStories.map(story => (
                   <StoryListItem
                     conversationId={story.conversationId}
-                  getPreferredBadge={getPreferredBadge}
                     key={story.storyView.timestamp}
+                    getPreferredBadge={getPreferredBadge}
                     i18n={i18n}
                     isHidden
                     onHideStory={toggleHideStories}
@@ -212,7 +213,12 @@ export const StoriesPane = ({
                 ))}
             </>
           )}
-        {!stories.length && i18n('Stories__list-empty')}
+          {!stories.length && (
+            <div className="Stories__pane__list--empty">
+              {i18n('Stories__list-empty')}
+            </div>
+          )}
+        </>
       </div>
     </>
   );