fix layout of story views/replies modal

stylesheets/components/StoryViewsNRepliesModal.scss

@@ -1,36 +1,34 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-$tabs-height: 28px;
-$tabs-margin-bottom: 16px;
-$footer-height: 36px;
-
 .StoryViewsNRepliesModal {
   min-width: 320px;
+  min-height: min(400px, 80vh);
+  max-height: 80vh;
   overflow: hidden;
 
   &--group {
     display: flex;
     flex-direction: column;
     flex: 1;
-    // explicit height prevents height:auto
-    // while allowing flex to actually size it
-    height: 0;
 
     .StoryViewsNRepliesModal__replies {
-      // at least 400px tall
+      flex: 1;
-      // but if screen is small, allow it to shrink further
+      overflow: auto;
-      // 75% - (header + header bottom margin + footer)
-      min-height: min(
-        calc(75vh - ($tabs-height + $tabs-margin-bottom + $footer-height)),
-        400px
-      );
     }
   }
 
   &__body {
+    flex: 1;
     display: flex;
     flex-direction: column;
+    overflow: hidden; // override modal's overflow: auto
+  }
+
+  &__body_inner {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
   }
 
   &__replies {
@@ -259,7 +257,7 @@ $footer-height: 36px;
 .Tabs.StoryViewsNRepliesModal__tabs {
   border-bottom: none;
   justify-content: center;
-  margin-bottom: $tabs-margin-bottom;
+  margin-bottom: 16px;
 }
 
 .Tabs__tab.StoryViewsNRepliesModal__tabs__tab {

ts/components/Modal.tsx

@@ -254,7 +254,9 @@ export function ModalPage({
           )}
           ref={bodyRef}
         >
-          <div ref={bodyInnerRef}>{children}</div>
+          <div ref={bodyInnerRef} className={getClassName('__body_inner')}>
+            {children}
+          </div>
         </div>
         {modalFooter && <Modal.ButtonFooter>{modalFooter}</Modal.ButtonFooter>}
       </div>