smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: make modal use viewport breakpoints (#7246)

Browse source
This commit is contained in:
David Luzar 2023-11-07 10:10:12 +01:00 • committed by GitHub
parent ce7a847668
commit 9006caff39
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/Dialog.tsx
View file

@ -49,7 +49,7 @@ export const Dialog = (props: DialogProps) => {
const [islandNode, setIslandNode] = useCallbackRefState<HTMLDivElement>();
const [lastActiveElement] = useState(document.activeElement);
const { id } = useExcalidrawContainer();
const device = useDevice();
const isFullscreen = useDevice().viewport.isMobile;
useEffect(() => {
if (!islandNode) {
@ -101,7 +101,9 @@ export const Dialog = (props: DialogProps) => {
return (
<Modal
className={clsx("Dialog", props.className)}
className={clsx("Dialog", props.className, {
"Dialog--fullscreen": isFullscreen,
})}
labelledBy="dialog-title"
maxWidth={getDialogSize(props.size)}
onCloseRequest={onClose}
@ -119,7 +121,7 @@ export const Dialog = (props: DialogProps) => {
title={t("buttons.close")}
aria-label={t("buttons.close")}
>
{device.editor.isMobile ? back : CloseIcon}
{isFullscreen ? back : CloseIcon}
</button>
<div className="Dialog__content">{props.children}</div>
</Island>