add text highlighting controls

only disable highlighting text when dragging widgets

client/src/components/layout/Canvas/Widget.jsx

@@ -5,7 +5,7 @@ export default function Widget({ title }) {
   const styles = recipe();
 
   return (
-    <chakra.div css={styles.root}>
+    <chakra.div >
       <chakra.div css={styles.header}
         className="widget-handle"
         // style={{ padding: '4px', cursor: 'move', background: '#ddd' }}

client/src/components/layout/Canvas/views/WidgetCanvas.jsx

@@ -25,6 +25,15 @@ export default function WidgetCanvas() {
         console.log('Updated layout:', newLayout)
     };
 
+    // don't allow text highlighting when dragging
+    const handleDragStart = () => {
+        document.body.style.userSelect = "none";
+    };
+    // allow text highlighting all other times
+    const handleDragStop = () => {
+        document.body.style.userSelect = "";
+    };
+
     return (
         <chakra.div height="100%" width="100%">
             <ResponsiveGridLayout
@@ -36,6 +45,8 @@ export default function WidgetCanvas() {
                 margin={[10, 10]} // [horizontal, vertical] gap
                 onLayoutChange={onLayoutChange}
                 draggableHandle=".widget-handle" // Make only the header draggable
+                onDragStart={handleDragStart}
+                onDragStop={handleDragStop}
             >
                 {layout.map((item) => (
                     <chakra.div key={item.i} css={styles.root}>