Prevent modal top from shrinking #7167
Conversation
| @@ -254,7 +254,7 @@ const Header = styled(Flex)` | |||
| const Small = styled.div` | |||
| animation: ${fadeAndScaleIn} 250ms ease; | |||
|
|
|||
| margin: auto auto; | |||
| margin: 25vh auto auto auto; | |||
There was a problem hiding this comment.
Note that this affects dialogs across the board.
There was a problem hiding this comment.
I believe we need to define a max height too, maybe 70vh?
There was a problem hiding this comment.
Just a note on this - setting max height leads us to manage overflow which provokes to manage scroll 😅
Looked into all this yesterday, almost there...
There was a problem hiding this comment.
🤞
Screen.Recording.2024-07-02.at.07.35.43.mov
| @@ -282,7 +282,7 @@ const Small = styled.div` | |||
| `; | |||
|
|
|||
| const SmallContent = styled(Scrollable)` | |||
| padding: 12px 24px 24px; | |||
| padding: 12px 24px; | |||
| scrollMode: "if-needed", | ||
| behavior: "auto", | ||
| block: "center", | ||
| boundary: window.document.body, |
There was a problem hiding this comment.
Isn't this boundary the default?
There was a problem hiding this comment.
Doesn't look like. The scroll isn't prevented upon keyboard navigation if boundary is absent. This fixes the problem.
app/hooks/useMaxHeight.ts
Outdated
| const useMaxHeight = ({ | ||
| elementRef, | ||
| maxViewportHeight = 90, | ||
| margin = 8, |
There was a problem hiding this comment.
| margin = 8, | |
| margin = 16, |
app/hooks/useMaxHeight.ts
Outdated
|
|
||
| const useMaxHeight = ({ | ||
| elementRef, | ||
| maxViewportHeight = 90, |
There was a problem hiding this comment.
I don't love this naming, might be better to pass as a fraction or… maxViewportPercentage for clarity
Closes #7166