diff --git a/stylesheets/components/StoryViewsNRepliesModal.scss b/stylesheets/components/StoryViewsNRepliesModal.scss index 99bdd2cb229c..07f6832ae65e 100644 --- a/stylesheets/components/StoryViewsNRepliesModal.scss +++ b/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 - // but if screen is small, allow it to shrink further - // 75% - (header + header bottom margin + footer) - min-height: min( - calc(75vh - ($tabs-height + $tabs-margin-bottom + $footer-height)), - 400px - ); + flex: 1; + overflow: auto; } } &__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 { diff --git a/ts/components/Modal.tsx b/ts/components/Modal.tsx index 19c0b8fe63d4..5bba0990a60a 100644 --- a/ts/components/Modal.tsx +++ b/ts/components/Modal.tsx @@ -254,7 +254,9 @@ export function ModalPage({ )} ref={bodyRef} > -