Fix stories View/Replies overflow scroll
This commit is contained in:
parent
f04e0b6122
commit
9858a1dc1b
2 changed files with 16 additions and 10 deletions
|
@ -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 {
|
||||
|
|
|
@ -435,11 +435,13 @@ export function StoryViewsNRepliesModal({
|
|||
i18n={i18n}
|
||||
moduleClassName="StoryViewsNRepliesModal"
|
||||
onClose={onClose}
|
||||
padded={false}
|
||||
useFocusTrap={Boolean(composerElement)}
|
||||
theme={Theme.Dark}
|
||||
>
|
||||
<div
|
||||
className={classNames({
|
||||
StoryViewsNRepliesModal__content: true,
|
||||
'StoryViewsNRepliesModal--group': Boolean(group),
|
||||
})}
|
||||
>
|
||||
|
|
Loading…
Reference in a new issue