sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile dialog styling (#1363)

Browse Source
This commit is contained in:
Jed Fox 2020-04-10 11:13:31 -04:00 committed by GitHub
parent f134211bf9
commit 16a3aa7561
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Modal.scss
View File

@ -28,12 +28,16 @@
position: relative; position: relative;
z-index: 2; z-index: 2;
width: 100%; width: 100%;
max-width: 100%; max-width: var(--max-width);
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(10px);
animation: Modal__content_fade-in 0.1s ease-out 0.05s forwards; animation: Modal__content_fade-in 0.1s ease-out 0.05s forwards;
position: relative; position: relative;
@media #{$media-query} {
max-width: 100%;
}
} }
@keyframes Modal__content_fade-in { @keyframes Modal__content_fade-in {

8
src/components/Modal.tsx
View File

@ -31,11 +31,13 @@ export function Modal(props: {
<div className="Modal__background" onClick={props.onCloseRequest}></div> <div className="Modal__background" onClick={props.onCloseRequest}></div>
<div <div
className="Modal__content" className="Modal__content"
style={{ style={
maxWidth: props.maxWidth, {
"--max-width": `${props.maxWidth}px`,
maxHeight: "100%", maxHeight: "100%",
overflowY: "scroll", overflowY: "scroll",
}} } as any
}
> >
{props.children} {props.children}
</div> </div>