Fix story direct Quick Reply and low height emoji picker limit

stylesheets/components/StoryViewsNRepliesModal.scss

@@ -3,14 +3,17 @@
 
 .StoryViewsNRepliesModal {
   min-width: 320px;
-  min-height: min(400px, 80vh);
   max-height: 80vh;
 
   &--group {
+    min-height: min(400px, 80vh);
+
+    .StoryViewsNRepliesModal__content {
       display: flex;
       flex-direction: column;
       flex: 1;
     }
+  }
 
   &__body {
     flex: 1;
@@ -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);
   }
 }
 

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({});
 {

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}