Fixed scrollbars on replies modal

This commit is contained in:
Alvaro 2022-11-11 10:17:30 -07:00 committed by GitHub
parent 5100d17ed2
commit 79757f22aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1,6 +1,10 @@
// Copyright 2022 Signal Messenger, LLC // Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
$tabs-height: 28px;
$tabs-margin-bottom: 16px;
$footer-height: 36px;
.StoryViewsNRepliesModal { .StoryViewsNRepliesModal {
min-width: 320px; min-width: 320px;
overflow: hidden; overflow: hidden;
@ -8,7 +12,25 @@
&--group { &--group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 400px; 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
);
}
}
&__body {
display: flex;
flex-direction: column;
} }
&__replies { &__replies {
@ -229,7 +251,7 @@
.Tabs.StoryViewsNRepliesModal__tabs { .Tabs.StoryViewsNRepliesModal__tabs {
border-bottom: none; border-bottom: none;
justify-content: center; justify-content: center;
margin-bottom: 16px; margin-bottom: $tabs-margin-bottom;
} }
.Tabs__tab.StoryViewsNRepliesModal__tabs__tab { .Tabs__tab.StoryViewsNRepliesModal__tabs__tab {