improve: generic-modal + restore previous visual output

zmkfirmware · Dec 24, 2024 · 35be006 · 35be006
1 parent 222db31
commit 35be006
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/src/AboutModal.tsx b/src/AboutModal.tsx
@@ -181,7 +181,7 @@ export const AboutModal: FC<PropsWithChildren> = ({ children }) => {
         {children}
       </a>
       <Modal open={open} onOpenChange={setOpen}>
-        <ModalContent>
+        <ModalContent className="w-[70vw]">
           <div className="flex justify-between items-start">
             <p>
               The ZMK Project:{" "}

diff --git a/src/misc/LicenseNoticeModal.tsx b/src/misc/LicenseNoticeModal.tsx
@@ -14,7 +14,7 @@ export const LicenseNoticeModal: FC<PropsWithChildren> = ({ children }) => {
         {children}
       </a>
       <Modal open={open} onOpenChange={setOpen}>
-        <ModalContent>
+        <ModalContent className="w-[60vw]">
           <div className="flex justify-between items-start">
             <p className="mr-2">
               ZMK Studio is released under the open source Apache 2.0 license. A

diff --git a/src/modal/Modal.tsx b/src/modal/Modal.tsx
@@ -81,11 +81,11 @@ export const Modal: FC<PropsWithChildren<Omit<ModalContextType, "id">>> = ({
   return (
     <ModalContext.Provider value={{ id: dialogId, open, onOpenChange }}>
       <dialog ref={dialogRef} className="group">
-        <div
-          className="fixed w-full h-full overflow-y inset-0 grid place-content-center bg-black/30 backdrop-blur-sm opacity-0 transition-all duration-300 ease-in-out group-data-[open]:opacity-100 group-data-[closing]:opacity-0"
-          onClick={handleBackdropClick}
-        >
-          <div className="w-full max-w-lg scale-75 p-4 opacity-0 shadow-lg transition-all duration-300 ease-out group-data-[open]:scale-100 group-data-[open]:opacity-100 group-data-[closing]:scale-75 group-data-[closing]:opacity-0">
+        <div className="fixed w-full h-full overflow-y inset-0 grid place-content-center bg-black/30 backdrop-blur-sm opacity-0 transition-all duration-300 ease-in-out group-data-[open]:opacity-100 group-data-[closing]:opacity-0">
+          <div
+            className="overflow-y-auto w-screen h-screen place-content-center scale-75 py-10 opacity-0 shadow-lg transition-all duration-300 ease-out group-data-[open]:scale-100 group-data-[open]:opacity-100 group-data-[closing]:scale-75 group-data-[closing]:opacity-0"
+            onClick={handleBackdropClick}
+          >
             {children}
           </div>
         </div>
@@ -106,7 +106,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
       <div
         ref={ref}
         className={[
-          "relative rounded-lg bg-base-100 text-base-content min-w-96 p-4",
+          "relative m-auto rounded-lg bg-base-100 text-base-content min-w-96 p-4",
           className,
         ].join(" ")}
       >