From 9858a1dc1ba3bbbfe8ad58692fb65f5ef180171f Mon Sep 17 00:00:00 2001
From: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
Date: Tue, 27 Feb 2024 09:42:37 -0800
Subject: [PATCH] Fix stories View/Replies overflow scroll

---
 .../components/StoryViewsNRepliesModal.scss   | 24 +++++++++++--------
 ts/components/StoryViewsNRepliesModal.tsx     |  2 ++
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/stylesheets/components/StoryViewsNRepliesModal.scss b/stylesheets/components/StoryViewsNRepliesModal.scss
index 07f6832ae65e..80773f26d679 100644
--- a/stylesheets/components/StoryViewsNRepliesModal.scss
+++ b/stylesheets/components/StoryViewsNRepliesModal.scss
@@ -5,24 +5,17 @@
   min-width: 320px;
   min-height: min(400px, 80vh);
   max-height: 80vh;
-  overflow: hidden;
 
   &--group {
     display: flex;
     flex-direction: column;
     flex: 1;
-
-    .StoryViewsNRepliesModal__replies {
-      flex: 1;
-      overflow: auto;
-    }
   }
 
   &__body {
     flex: 1;
     display: flex;
     flex-direction: column;
-    overflow: hidden; // override modal's overflow: auto
   }
 
   &__body_inner {
@@ -31,12 +24,19 @@
     flex: 1;
   }
 
+  &__content {
+    &:not(:has(.Tabs)) {
+      padding-block-start: 16px;
+    }
+
+    padding-block-end: 16px;
+    padding-inline: 16px;
+  }
+
   &__replies {
     flex: 1;
     margin-block: 0;
     margin-inline: -16px;
-    max-height: 75vh;
-    overflow-y: overlay;
 
     &--none {
       align-items: center;
@@ -255,9 +255,13 @@
 }
 
 .Tabs.StoryViewsNRepliesModal__tabs {
+  position: sticky;
+  top: 0;
+  z-index: $z-index-base;
+  padding-block: 16px;
+  background: $color-gray-80;
   border-bottom: none;
   justify-content: center;
-  margin-bottom: 16px;
 }
 
 .Tabs__tab.StoryViewsNRepliesModal__tabs__tab {
diff --git a/ts/components/StoryViewsNRepliesModal.tsx b/ts/components/StoryViewsNRepliesModal.tsx
index dc5546a2191d..f63859950c1c 100644
--- a/ts/components/StoryViewsNRepliesModal.tsx
+++ b/ts/components/StoryViewsNRepliesModal.tsx
@@ -435,11 +435,13 @@ export function StoryViewsNRepliesModal({
         i18n={i18n}
         moduleClassName="StoryViewsNRepliesModal"
         onClose={onClose}
+        padded={false}
         useFocusTrap={Boolean(composerElement)}
         theme={Theme.Dark}
       >
         <div
           className={classNames({
+            StoryViewsNRepliesModal__content: true,
             'StoryViewsNRepliesModal--group': Boolean(group),
           })}
         >