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-width: 320px;
|
||||||
min-height: min(400px, 80vh);
|
min-height: min(400px, 80vh);
|
||||||
max-height: 80vh;
|
max-height: 80vh;
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&--group {
|
&--group {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
.StoryViewsNRepliesModal__replies {
|
|
||||||
flex: 1;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__body {
|
&__body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden; // override modal's overflow: auto
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__body_inner {
|
&__body_inner {
|
||||||
|
@ -31,12 +24,19 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
&:not(:has(.Tabs)) {
|
||||||
|
padding-block-start: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
padding-block-end: 16px;
|
||||||
|
padding-inline: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
&__replies {
|
&__replies {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-block: 0;
|
margin-block: 0;
|
||||||
margin-inline: -16px;
|
margin-inline: -16px;
|
||||||
max-height: 75vh;
|
|
||||||
overflow-y: overlay;
|
|
||||||
|
|
||||||
&--none {
|
&--none {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -255,9 +255,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.Tabs.StoryViewsNRepliesModal__tabs {
|
.Tabs.StoryViewsNRepliesModal__tabs {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: $z-index-base;
|
||||||
|
padding-block: 16px;
|
||||||
|
background: $color-gray-80;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.Tabs__tab.StoryViewsNRepliesModal__tabs__tab {
|
.Tabs__tab.StoryViewsNRepliesModal__tabs__tab {
|
||||||
|
|
|
@ -435,11 +435,13 @@ export function StoryViewsNRepliesModal({
|
||||||
i18n={i18n}
|
i18n={i18n}
|
||||||
moduleClassName="StoryViewsNRepliesModal"
|
moduleClassName="StoryViewsNRepliesModal"
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
|
padded={false}
|
||||||
useFocusTrap={Boolean(composerElement)}
|
useFocusTrap={Boolean(composerElement)}
|
||||||
theme={Theme.Dark}
|
theme={Theme.Dark}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={classNames({
|
className={classNames({
|
||||||
|
StoryViewsNRepliesModal__content: true,
|
||||||
'StoryViewsNRepliesModal--group': Boolean(group),
|
'StoryViewsNRepliesModal--group': Boolean(group),
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue