From 7c29b2a14c9d351e2150067c1363d0c31db05507 Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Tue, 22 Jul 2025 14:55:28 -0700
Subject: [PATCH] widget overflow now scrolls

if content is too big for widget it now scrolls.
---
 client/src/App.jsx                                       | 6 ++++++
 client/src/components/layout/Canvas/Widget.jsx           | 9 +++------
 .../src/components/layout/Canvas/views/WidgetCanvas.jsx  | 4 ++--
 client/src/theme.js                                      | 1 +
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index e3e5cce..c60c2f9 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -19,6 +19,12 @@ function App() {
           opacity: 1 !important;
           border-radius: 5px;
         }
+
+        .react-resizable-handle-se {
+          position: sticky;
+          right: 0;
+          bottom: 0;
+        }
       `}
     />
     <Grid css={styles}
diff --git a/client/src/components/layout/Canvas/Widget.jsx b/client/src/components/layout/Canvas/Widget.jsx
index 4052d0c..1c83c21 100644
--- a/client/src/components/layout/Canvas/Widget.jsx
+++ b/client/src/components/layout/Canvas/Widget.jsx
@@ -5,14 +5,11 @@ export default function Widget({ title }) {
   const styles = recipe();
 
   return (
-    <chakra.div >
-      <chakra.div css={styles.header}
-        className="widget-handle"
-        // style={{ padding: '4px', cursor: 'move', background: '#ddd' }}
-      >
+    <chakra.div className="react-resizable-handle-se">
+      <chakra.div css={styles.header} className="widget-handle" >
         {title}
       </chakra.div>
-      <chakra.div css={styles.canvas}>
+      <chakra.div css={styles.canvas} >
         This is the widget content - drag or resize me!
       </chakra.div>
     </chakra.div>
diff --git a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx b/client/src/components/layout/Canvas/views/WidgetCanvas.jsx
index f30b150..ba57e32 100644
--- a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/WidgetCanvas.jsx
@@ -35,7 +35,7 @@ export default function WidgetCanvas() {
     };
 
     return (
-        <chakra.div height="100%" width="100%">
+        <chakra.div width="100%">
             <ResponsiveGridLayout
                 className="layout"
                 layout={layout}
@@ -49,7 +49,7 @@ export default function WidgetCanvas() {
                 onDragStop={handleDragStop}
             >
                 {layout.map((item) => (
-                    <chakra.div key={item.i} css={styles.root}>
+                    <chakra.div key={item.i} css={styles.root} >
                         <Widget title="VDAP Widget" />
                     </chakra.div>
                 ))}
diff --git a/client/src/theme.js b/client/src/theme.js
index 31dbac5..f2fb2ca 100644
--- a/client/src/theme.js
+++ b/client/src/theme.js
@@ -59,6 +59,7 @@ const widgetRecipe = defineSlotRecipe({
       border: "1px solid",
       borderColor: "{base300}",
       textAlign: "center",
+      overflow: "auto"
     },
     header: {
       bg: "base100",