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({ -
+
{tabsElement || ( <> {viewsElement || repliesElement}