From 66dac23f9dacb3ecc8fe1f736202718cbeaa7f1a Mon Sep 17 00:00:00 2001
From: Charles Graham SWT <krowven@gmail.com>
Date: Fri, 30 May 2025 08:35:08 -0500
Subject: [PATCH 1/4] Correct size issue, sizes did not cause any change

---
 lib/components/display/modal.jsx | 24 ++++++++++++++++--------
 lib/utils/sizes.js               | 13 -------------
 2 files changed, 16 insertions(+), 21 deletions(-)
 delete mode 100644 lib/utils/sizes.js

diff --git a/lib/components/display/modal.jsx b/lib/components/display/modal.jsx
index 55f0c354..d6665e2b 100644
--- a/lib/components/display/modal.jsx
+++ b/lib/components/display/modal.jsx
@@ -6,7 +6,18 @@ import {
   DialogBackdrop,
 } from "@headlessui/react";
 import gwMerge from "../../gw-merge";
-import { WIDTH_OPTIONS } from "../../utils/sizes";
+
+const WIDTH_OPTIONS = {
+  xs: "max-w-xs",
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+};
 
 function Modal({
   opened = false,
@@ -18,15 +29,12 @@ function Modal({
   className,
   children,
 }) {
-  // Check if the size exists
+    // Check if the size exists
+  const widthClass = WIDTH_OPTIONS[size] ?? WIDTH_OPTIONS["2xl"];
   if (!WIDTH_OPTIONS[size]) {
-    console.error(
-      `Invalid size prop: ${size}. Must be one of: 'sx', 'sm', 'md', 'lg', 'xl', '2xl', '4xl', 'full'`
-    );
     console.warn(
-      `Defaulting to '2xl' for size of <Modal modalTitle="${dialogTitle}" .../>`
+        `Modal: invalid size "${size}" passed. Falling back to "2xl".`
     );
-    size = "2xl";
   }
 
   return (
@@ -40,7 +48,7 @@ function Modal({
         <div className="gw-flex gw-min-h-full gw-items-center gw-justify-center">
           <DialogPanel
             className={gwMerge(
-              WIDTH_OPTIONS[size],
+              widthClass,
               "gw-space-y-4",
               "gw-border",
               "gw-rounded-lg",
diff --git a/lib/utils/sizes.js b/lib/utils/sizes.js
deleted file mode 100644
index 3652a5e0..00000000
--- a/lib/utils/sizes.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const WIDTH_OPTIONS = {
-  xs: "max-w-xs",
-  sm: "max-w-sm",
-  md: "max-w-md",
-  lg: "max-w-lg",
-  xl: "max-w-xl",
-  "2xl": "max-w-2xl",
-  "3xl": "max-w-3xl",
-  "4xl": "max-w-4xl",
-  "5xl": "max-w-5xl",
-};
-
-export { WIDTH_OPTIONS };

From d9bd3c890cf6cc0c918b31036cf7b5a1eaf95625 Mon Sep 17 00:00:00 2001
From: Charles Graham SWT <krowven@gmail.com>
Date: Fri, 30 May 2025 09:42:50 -0500
Subject: [PATCH 2/4] Change prop "buttons" to "footer"

---
 lib/components/display/modal.jsx              | 26 ++++++++++++-------
 src/app-pages/documentation/display/modal.jsx |  8 +++---
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/lib/components/display/modal.jsx b/lib/components/display/modal.jsx
index d6665e2b..04bd727d 100644
--- a/lib/components/display/modal.jsx
+++ b/lib/components/display/modal.jsx
@@ -24,16 +24,15 @@ function Modal({
   onClose,
   dialogTitle,
   dialogDescription,
-  buttons,
+  footer,
   size = "2xl",
   className,
   children,
 }) {
-    // Check if the size exists
   const widthClass = WIDTH_OPTIONS[size] ?? WIDTH_OPTIONS["2xl"];
   if (!WIDTH_OPTIONS[size]) {
     console.warn(
-        `Modal: invalid size "${size}" passed. Falling back to "2xl".`
+      `Modal: invalid size "${size}" passed. Falling back to "2xl".`
     );
   }
 
@@ -53,20 +52,29 @@ function Modal({
               "gw-border",
               "gw-rounded-lg",
               "gw-shadow-lg",
-              "gw-bg-white",
-              "gw-p-12"
+              "gw-bg-white"
             )}
           >
             {dialogTitle && (
-              <DialogTitle className="gw-font-bold gw-text-center">
+              <DialogTitle className="gw-font-bold gw-text-center gw-p-4 gw-text-lg gw-bg-slate-200 dark:gw-bg-slate-600 dark:gw-text-white gw-rounded-t">
                 {dialogTitle}
               </DialogTitle>
             )}
             {dialogDescription && (
-              <Description>{dialogDescription}</Description>
+              <Description className="gw-px-4 gw-py-2">
+                {dialogDescription}
+              </Description>
             )}
-            {children}
-            {buttons}
+            <div className="gw-overflow-auto gw-h-full gw-px-5 gw-bg-white dark:gw-bg-slate-700 dark:gw-text-white">
+              {children}
+            </div>
+            {footer && (
+              <div className="gw-px-12 gw-py-4 gw-rounded-b gw-bg-slate-200">
+                {footer}
+              </div>
+            )}
+
+            {/* Resize Handle */}
           </DialogPanel>
         </div>
       </div>
diff --git a/src/app-pages/documentation/display/modal.jsx b/src/app-pages/documentation/display/modal.jsx
index 9fb7e745..bd684a12 100644
--- a/src/app-pages/documentation/display/modal.jsx
+++ b/src/app-pages/documentation/display/modal.jsx
@@ -41,10 +41,10 @@ const componentProps = [
     desc: "Description of the modal dialog.",
   },
   {
-    name: "buttons",
+    name: "footer",
     type: "ReactNode",
     default: "null",
-    desc: "Button components to display at the bottom of the modal.",
+    desc: "Footer components to display at the bottom of the modal.",
   },
   {
     name: "children",
@@ -92,7 +92,7 @@ function ModalDocs() {
           dialogDescription="1-7 Day Quantitative Precipitation Forecast"
           size="2xl"
           staticWidth={true}
-          buttons={
+          footer={
             <div className="gw-flex gw-justify-end gw-gap-4">
               <Button className="gw-w-full" onClick={refreshImage}>
                 Refresh Image
@@ -166,7 +166,7 @@ function Example() {
           dialogDescription="1-7 Day Quantitative Precipitation Forecast"
           size="2xl"
           staticWidth={true}
-          buttons={
+          footer={
             <div className="gw-flex gw-justify-end gw-gap-4">
               <Button
                 className="gw-w-full"

From 2de3afe8baee237c6a0f9e87d6ac942cee99483c Mon Sep 17 00:00:00 2001
From: Charles Graham SWT <krowven@gmail.com>
Date: Fri, 30 May 2025 09:44:27 -0500
Subject: [PATCH 3/4] Make the modal draggable

---
 lib/components/display/modal.jsx | 59 +++++++++++++++++++++++++++-----
 1 file changed, 50 insertions(+), 9 deletions(-)

diff --git a/lib/components/display/modal.jsx b/lib/components/display/modal.jsx
index 04bd727d..6c9e21a4 100644
--- a/lib/components/display/modal.jsx
+++ b/lib/components/display/modal.jsx
@@ -6,6 +6,7 @@ import {
   DialogBackdrop,
 } from "@headlessui/react";
 import gwMerge from "../../gw-merge";
+import { useRef, useState, useEffect } from "react";
 
 const WIDTH_OPTIONS = {
   xs: "max-w-xs",
@@ -36,32 +37,74 @@ function Modal({
     );
   }
 
+  const panelRef = useRef(null);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+  const handleMouseDown = (e) => {
+    const rect = panelRef.current.getBoundingClientRect();
+    setOffset({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    setDragging(true);
+  };
+
+  const handleMouseMove = (e) => {
+    if (dragging) {
+      setPosition({
+        x: e.clientX - offset.x,
+        y: e.clientY - offset.y,
+      });
+    }
+  };
+
+  const handleMouseUp = () => {
+    setDragging(false);
+  };
+
+  useEffect(() => {
+    if (dragging) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [dragging, offset]);
+
   return (
     <Dialog
       open={opened}
       onClose={onClose}
+      onMouseDown={handleMouseDown}
       className={gwMerge("gw-relative", "gw-z-50", className)}
     >
       <DialogBackdrop className="gw-fixed gw-inset-0 gw-bg-black/30" />
       <div className="gw-fixed gw-inset-0 gw-w-screen gw-overflow-auto gw-p-4">
-        <div className="gw-flex gw-min-h-full gw-items-center gw-justify-center">
+        <div
+          className="gw-relative"
+          style={{ top: position.y, left: position.x }}
+        >
           <DialogPanel
+            ref={panelRef}
             className={gwMerge(
               widthClass,
-              "gw-space-y-4",
               "gw-border",
               "gw-rounded-lg",
               "gw-shadow-lg",
-              "gw-bg-white"
+              "gw-bg-white",
+              "gw-relative"
             )}
           >
-            {dialogTitle && (
-              <DialogTitle className="gw-font-bold gw-text-center gw-p-4 gw-text-lg gw-bg-slate-200 dark:gw-bg-slate-600 dark:gw-text-white gw-rounded-t">
+            {/* Drag Handle */}
+            <div className="gw-cursor-move gw-p-4 gw-bg-gray-100 gw-rounded">
+              <DialogTitle className="gw-font-bold gw-text-center gw-select-none">
                 {dialogTitle}
               </DialogTitle>
-            )}
+            </div>
+
             {dialogDescription && (
-              <Description className="gw-px-4 gw-py-2">
+              <Description className="gw-px-5 gw-my-2">
                 {dialogDescription}
               </Description>
             )}
@@ -73,8 +116,6 @@ function Modal({
                 {footer}
               </div>
             )}
-
-            {/* Resize Handle */}
           </DialogPanel>
         </div>
       </div>

From 130d63d0fd724483bfec15e894f9c78806237b09 Mon Sep 17 00:00:00 2001
From: Charles Graham SWT <krowven@gmail.com>
Date: Fri, 30 May 2025 09:46:32 -0500
Subject: [PATCH 4/4] Make the modal resizable

---
 lib/components/display/modal.jsx | 51 ++++++++++++++++++++++++++------
 1 file changed, 42 insertions(+), 9 deletions(-)

diff --git a/lib/components/display/modal.jsx b/lib/components/display/modal.jsx
index 6c9e21a4..386e2063 100644
--- a/lib/components/display/modal.jsx
+++ b/lib/components/display/modal.jsx
@@ -38,9 +38,12 @@ function Modal({
   }
 
   const panelRef = useRef(null);
+  // Modal Defaults
+  const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [dragging, setDragging] = useState(false);
   const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [resizing, setResizing] = useState(false);
 
   const handleMouseDown = (e) => {
     const rect = panelRef.current.getBoundingClientRect();
@@ -54,15 +57,22 @@ function Modal({
         x: e.clientX - offset.x,
         y: e.clientY - offset.y,
       });
+    } else if (resizing) {
+      const rect = panelRef.current.getBoundingClientRect();
+      setDimensions({
+        width: Math.max(300, e.clientX - rect.left),
+        height: Math.max(200, e.clientY - rect.top),
+      });
     }
   };
 
   const handleMouseUp = () => {
     setDragging(false);
+    setResizing(false);
   };
 
   useEffect(() => {
-    if (dragging) {
+    if (dragging || resizing) {
       window.addEventListener("mousemove", handleMouseMove);
       window.addEventListener("mouseup", handleMouseUp);
     }
@@ -70,7 +80,7 @@ function Modal({
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [dragging, offset]);
+  }, [dragging, resizing, offset]);
 
   return (
     <Dialog
@@ -95,14 +105,22 @@ function Modal({
               "gw-bg-white",
               "gw-relative"
             )}
+            style={
+              dimensions.width && dimensions.height
+                ? {
+                    width: dimensions.width,
+                    height: dimensions.height,
+                    maxWidth: "80vw",
+                    maxHeight: "90vh",
+                  }
+                : undefined
+            }
           >
-            {/* Drag Handle */}
             <div className="gw-cursor-move gw-p-4 gw-bg-gray-100 gw-rounded">
               <DialogTitle className="gw-font-bold gw-text-center gw-select-none">
                 {dialogTitle}
               </DialogTitle>
             </div>
-
             {dialogDescription && (
               <Description className="gw-px-5 gw-my-2">
                 {dialogDescription}
@@ -111,11 +129,26 @@ function Modal({
             <div className="gw-overflow-auto gw-h-full gw-px-5 gw-bg-white dark:gw-bg-slate-700 dark:gw-text-white">
               {children}
             </div>
-            {footer && (
-              <div className="gw-px-12 gw-py-4 gw-rounded-b gw-bg-slate-200">
-                {footer}
-              </div>
-            )}
+            <div className="gw-flex gw-items-center  gw-bg-gray-100 gw-rounded-b">
+              <div className="gw-px-4 gw-py-4">{footer}</div>
+              <div
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setResizing(true);
+                }}
+                className="gw-w-6 gw-h-6 gw-cursor-se-resize gw-ml-auto gw-mt-8"
+                style={{
+                  backgroundImage:
+                    "linear-gradient(135deg, transparent 45%, #4b5563 45%, #4b5563 55%, transparent 55%)," +
+                    "linear-gradient(135deg, transparent 65%, #4b5563 65%, #4b5563 75%, transparent 75%)",
+                  backgroundRepeat: "no-repeat",
+                  backgroundPosition: "bottom right",
+                  backgroundSize: "100% 100%",
+                }}
+                title="Resize"
+              />
+            </div>
           </DialogPanel>
         </div>
       </div>