fix #852

hyperdrive/packages/homepage/ui/src/components/Home/components/Draggable.tsx

@@ -64,16 +64,16 @@ export const Draggable: React.FC<DraggableProps> = ({
   useEffect(() => {
     const handleMouseMove = (e: MouseEvent) => handleMove(e.clientX, e.clientY);
     const handleTouchMove = (e: TouchEvent) => {
-      e.preventDefault();
+      try {e.preventDefault();} catch {}
       const touch = e.touches[0];
       handleMove(touch.clientX, touch.clientY);
     };
     const handleMouseUp = (e: MouseEvent) => {
-      e.preventDefault();
+      try {e.preventDefault();} catch {}
       handleEnd();
     };
     const handleTouchEnd = (e: TouchEvent) => {
-      e.preventDefault();
+      try {e.preventDefault();} catch {}
       handleEnd();
     };
 
@@ -130,8 +130,8 @@ export const Draggable: React.FC<DraggableProps> = ({
       onTouchStart={(e) => {
         // Only handle touch for widgets (when enableHtmlDrag is false)
         if (isEditMode && !enableHtmlDrag) {
-          e.preventDefault();
-          e.stopPropagation();
+          try {e.preventDefault();} catch {}
+          try {e.stopPropagation();} catch {}
           const touch = e.touches[0];
           handleStart(touch.clientX, touch.clientY);
         }

hyperdrive/packages/homepage/ui/src/components/Home/components/Widget.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useMemo } from 'react';
 import type { HomepageApp } from '../../../types/app.types';
 import { usePersistenceStore } from '../../../stores/persistenceStore';
 import { Draggable } from './Draggable';
@@ -48,7 +48,7 @@ export const Widget: React.FC<WidgetProps> = ({ app, index, totalWidgets, childr
     }
   };
 
-  const size = settings.size || calculateSize();
+  const size = useMemo(() => settings.size || calculateSize(), [settings.size]);
 
   // Calculate responsive position based on index
   const calculatePosition = () => {
@@ -67,7 +67,7 @@ export const Widget: React.FC<WidgetProps> = ({ app, index, totalWidgets, childr
     }
   };
 
-  const position = settings.position || calculatePosition();
+  const position = useMemo(() => settings.position || calculatePosition(), [settings.position]);
 
   // Widgets can either have widget HTML content or be loaded from their app URL
   const isHtmlWidget = app.widget && app.widget !== 'true' && app.widget.includes('<');
@@ -132,10 +132,11 @@ export const Widget: React.FC<WidgetProps> = ({ app, index, totalWidgets, childr
     >
       <button
         onClick={(e) => {
-          try {
-            e.stopPropagation();
-          } catch { }
-
+          if (isMobile) return;
+          toggleWidget(app.id);
+        }}
+        onTouchEnd={(e) => {
+          if (!isMobile) return;
           toggleWidget(app.id);
         }}
         className="clear thin w-3 h-3 !p-0 absolute top-3 right-3 z-30"