forked from Kieran/snort
fix: note creator modal alignment
This commit is contained in:
parent
9c47d00739
commit
0b67cfdc4e
@ -3,12 +3,14 @@ import { useEffect } from "react"
|
||||
import * as React from "react";
|
||||
|
||||
export interface ModalProps {
|
||||
className?: string
|
||||
onClose?: () => void,
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export default function Modal(props: ModalProps) {
|
||||
const onClose = props.onClose || (() => { });
|
||||
const className = props.className || ''
|
||||
|
||||
useEffect(() => {
|
||||
document.body.classList.add("scroll-lock");
|
||||
@ -16,7 +18,7 @@ export default function Modal(props: ModalProps) {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="modal" onClick={(e) => { e.stopPropagation(); onClose(); }}>
|
||||
<div className={`modal ${className}`} onClick={(e) => { e.stopPropagation(); onClose(); }}>
|
||||
<div className="modal-body">
|
||||
{props.children}
|
||||
</div>
|
||||
|
@ -76,3 +76,12 @@
|
||||
right: 25vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.note-creator-modal {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.note-creator-modal .modal-body {
|
||||
margin-top: 20vh;
|
||||
}
|
||||
}
|
||||
|
@ -90,7 +90,7 @@ export function NoteCreator(props: NoteCreatorProps) {
|
||||
<Plus />
|
||||
</button>
|
||||
{show && (
|
||||
<Modal onClose={props.onClose}>
|
||||
<Modal className="note-creator-modal" onClose={props.onClose}>
|
||||
<div className={`flex note-creator ${props.replyTo ? 'note-reply' : ''}`}>
|
||||
<div className="flex f-col mr10 f-grow">
|
||||
<Textarea
|
||||
|
Loading…
Reference in New Issue
Block a user