diff --git a/stylesheets/components/StoryViewsNRepliesModal.scss b/stylesheets/components/StoryViewsNRepliesModal.scss index 07f6832ae6..80773f26d6 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 dc5546a219..f63859950c 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} >