From 4d794eaf145b1bb0a91cf1a72a572b9b94077118 Mon Sep 17 00:00:00 2001
From: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
Date: Wed, 3 Apr 2024 15:39:20 -0700
Subject: [PATCH] Fix story direct Quick Reply and low height emoji picker
 limit

---
 .../components/StoryViewsNRepliesModal.scss   | 21 ++++++++++++++-----
 .../StoryViewsNRepliesModal.stories.tsx       |  2 +-
 ts/components/StoryViewsNRepliesModal.tsx     | 12 +++++------
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/stylesheets/components/StoryViewsNRepliesModal.scss b/stylesheets/components/StoryViewsNRepliesModal.scss
index 80773f26d679..c66e17ba2fb7 100644
--- a/stylesheets/components/StoryViewsNRepliesModal.scss
+++ b/stylesheets/components/StoryViewsNRepliesModal.scss
@@ -3,13 +3,16 @@
 
 .StoryViewsNRepliesModal {
   min-width: 320px;
-  min-height: min(400px, 80vh);
   max-height: 80vh;
 
   &--group {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
+    min-height: min(400px, 80vh);
+
+    .StoryViewsNRepliesModal__content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
   }
 
   &__body {
@@ -29,6 +32,13 @@
       padding-block-start: 16px;
     }
 
+    // When picking from full emoji set, compensate for for hidden quick picker
+    &:has(.module-emoji-picker)::before {
+      content: '';
+      display: block;
+      height: 52px;
+    }
+
     padding-block-end: 16px;
     padding-inline: 16px;
   }
@@ -249,8 +259,9 @@
   }
 
   .module-emoji-picker {
-    bottom: 55px;
     position: absolute;
+    bottom: 55px;
+    max-height: calc(100vh - 100px);
   }
 }
 
diff --git a/ts/components/StoryViewsNRepliesModal.stories.tsx b/ts/components/StoryViewsNRepliesModal.stories.tsx
index 8a429a78eb66..7246b7412664 100644
--- a/ts/components/StoryViewsNRepliesModal.stories.tsx
+++ b/ts/components/StoryViewsNRepliesModal.stories.tsx
@@ -188,7 +188,7 @@ export const InAGroupNoReplies = Template.bind({});
 InAGroupNoReplies.args = {
   group: {},
 };
-InAGroupNoReplies.storyName = 'In a group (no replies)';
+InAGroupNoReplies.storyName = 'In a group (no replies, can reply)';
 
 export const InAGroup = Template.bind({});
 {
diff --git a/ts/components/StoryViewsNRepliesModal.tsx b/ts/components/StoryViewsNRepliesModal.tsx
index 7c05d39febd9..d03c4adf045c 100644
--- a/ts/components/StoryViewsNRepliesModal.tsx
+++ b/ts/components/StoryViewsNRepliesModal.tsx
@@ -440,18 +440,16 @@ export function StoryViewsNRepliesModal({
       <Modal
         modalName="StoryViewsNRepliesModal"
         i18n={i18n}
-        moduleClassName="StoryViewsNRepliesModal"
+        moduleClassName={classNames({
+          StoryViewsNRepliesModal: true,
+          'StoryViewsNRepliesModal--group': Boolean(group),
+        })}
         onClose={onClose}
         padded={false}
         useFocusTrap={Boolean(composerElement)}
         theme={Theme.Dark}
       >
-        <div
-          className={classNames({
-            StoryViewsNRepliesModal__content: true,
-            'StoryViewsNRepliesModal--group': Boolean(group),
-          })}
-        >
+        <div className="StoryViewsNRepliesModal__content">
           {tabsElement || (
             <>
               {viewsElement || repliesElement}