quantified.uncertainty/squiggle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

increase modal width

Browse Source
This commit is contained in:
Vyacheslav Matyukhin 2022-07-27 01:26:54 +04:00
parent 8fbf5decf8
commit a599768638
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
1 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/components/src/components/ui/Modal.tsx
View File

@ -2,10 +2,8 @@ import { motion } from "framer-motion";
import React, { useContext } from "react"; import React, { useContext } from "react";
import * as ReactDOM from "react-dom"; import * as ReactDOM from "react-dom";
import { XIcon } from "@heroicons/react/solid"; import { XIcon } from "@heroicons/react/solid";
import { SquiggleContainer } from "../SquiggleContainer";
import clsx from "clsx"; import clsx from "clsx";
import { useWindowScroll, useWindowSize } from "react-use"; import { useWindowScroll, useWindowSize } from "react-use";
import { rectToClientRect } from "@floating-ui/core";
type ModalContextShape = { type ModalContextShape = {
close: () => void; close: () => void;
@ -79,15 +77,16 @@ const ModalWindow: React.FC<{
} }
| undefined; | undefined;
const { clientWidth: screenWidth, clientHeight: screenHeight } = // If available space in `visibleRect` is smaller than these, fallback to positioning in the middle of the screen.
document.documentElement; const minWidth = 384;
if (container) { const minHeight = 300;
const rect = container?.getBoundingClientRect(); const offset = 8;
const naturalWidth = 576; // maximum possible width; modal tries to take this much space, but can be smaller
// If available space in `visibleRect` is smaller than these, fallback to positioning in the middle of the screen. if (container) {
const minWidth = 384; // matches the w-96 below const { clientWidth: screenWidth, clientHeight: screenHeight } =
const minHeight = 300; document.documentElement;
const offset = 8; const rect = container?.getBoundingClientRect();
const visibleRect = { const visibleRect = {
left: Math.max(rect.left, 0), left: Math.max(rect.left, 0),
@ -116,15 +115,17 @@ const ModalWindow: React.FC<{
return ( return (
<div <div
className={clsx( className={clsx(
"bg-white rounded-md shadow-toast flex flex-col overflow-auto border w-96", "bg-white rounded-md shadow-toast flex flex-col overflow-auto border",
position ? "fixed" : null position ? "fixed" : null
)} )}
style={ style={{
position ?? { width: naturalWidth,
...(position ?? {
maxHeight: "calc(100% - 20px)", maxHeight: "calc(100% - 20px)",
maxWidth: "calc(100% - 20px)", maxWidth: "calc(100% - 20px)",
} width: naturalWidth,
} }),
}}
> >
{children} {children}
</div> </div>