Fixed scrollbars on replies modal
This commit is contained in:
parent
5100d17ed2
commit
79757f22aa
1 changed files with 24 additions and 2 deletions
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue