diff --git a/hyperdrive/packages/homepage/ui/src/components/Home/components/Draggable.tsx b/hyperdrive/packages/homepage/ui/src/components/Home/components/Draggable.tsx index 4535cba2f..a5bbb7ba0 100644 --- a/hyperdrive/packages/homepage/ui/src/components/Home/components/Draggable.tsx +++ b/hyperdrive/packages/homepage/ui/src/components/Home/components/Draggable.tsx @@ -64,16 +64,16 @@ export const Draggable: React.FC = ({ 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 = ({ 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); } diff --git a/hyperdrive/packages/homepage/ui/src/components/Home/components/Widget.tsx b/hyperdrive/packages/homepage/ui/src/components/Home/components/Widget.tsx index 44a091c14..55e40d3d1 100644 --- a/hyperdrive/packages/homepage/ui/src/components/Home/components/Widget.tsx +++ b/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 = ({ 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 = ({ 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 = ({ app, index, totalWidgets, childr >