8000 Share modal doesn't scroll when it gets too long · Issue #7328 · outline/outline · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Share modal doesn't scroll when it gets too long #7328

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
bkrausz opened this issue Jul 31, 2024 · 5 comments · Fixed by #7344
Closed

Share modal doesn't scroll when it gets too long #7328

bkrausz opened this issue Jul 31, 2024 · 5 comments · Fixed by #7344
Assignees
@apoorv-mishra
Labels
bug

Comments

@bkrausz
Copy link
Contributor
bkrausz commented Jul 31, 2024 •
edited
Loading

On latest Chrome...you can see the modal flows below the window (look for the border radius):

CleanShot 2024-07-30 at 16 58 26@2x

Flexbox doesn't seem to play nice with overflow: scroll. Also seeing this on mobile. I got a fix working for desktop, but it's somewhat ugly so decided to punt to a ticket:

diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx
index 5cb396b51..10017c9d8 100644
--- a/app/components/Modal.tsx
+++ b/app/components/Modal.tsx
@@ -120,7 +120,7 @@ const Modal: React.FC<Props> = ({
                     <SmallContent style={style} shadow>
                       <ErrorBoundary component="div">{children}</ErrorBoundary>
                     </SmallContent>
-                    <Header>
+                    <Header shrink={false}>
                       {title && <Text size="large">{title}</Text>}
                       <NudeButton 
                         <CloseIcon />
@@ -256,7 +256,8 @@ const Header = styled(Flex)`
 const Small = styled.div`
   animation: ${fadeAndScaleIn} 250ms ease;
 
-  margin: 25vh auto auto auto;
+  margin: 20vh auto auto auto;
+  max-height: 75vh;
   width: 75vw;
   min-width: 350px;
   max-width: 450px;
@@ -285,6 +286,7 @@ const Small = styled.div`
 
 const SmallContent = styled(Scrollable)`
   padding: 12px 24px 24px;
+  overflow: hidden auto;
 `;
 
 export default observer(Modal);

I think the right approach is to move off of flexbox for the modal, then max-height, etc, can work better, but not positive.
@bkrausz bkrausz added the bug label Jul 31, 2024
@linear Linear
Copy link
linear bot commented Jul 31, 2024

OLN-523 Share modal doesn't scroll when it gets too long

@tommoor
Copy link
Member
tommoor commented Jul 31, 2024

@apoorv-mishra didnt you recently change/fix this?

@apoorv-mishra
Copy link
Member

I did, yes, as part of this PR. Also, just tried in Chrome, but can't seem to reproduce in latest main branch👇

Screen.Recording.2024-07-31.at.14.44.24.mov

@bkrausz
Copy link
Contributor Author
bkrausz commented Jul 31, 2024

@apoorv-mishra I'm on the UI that shows the existing list of members, not the typeahead for new members. It's currently impossible to scroll through the list of all existing members

@apoorv-mishra
Copy link
Member

Ahh! Sorry for the oversight. Will take a look today...

@apoorv-mishra apoorv-mishra self-assigned this Aug 1, 2024
@apoorv-mishra apoorv-mishra mentioned this issue Aug 2, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@apoorv-mishra apoorv-mishra

Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Make share dialog scrollable outline/outline
3 participants
@bkrausz @tommoor @apoorv-mishra
0