Upload folder using huggingface_hub

client/src/pages/TutorialTasks.tsx

@@ -170,6 +170,28 @@ const TutorialTasks: React.FC = () => {
     el.style.minHeight = '';
   };
 
+  // During volatile mutations on Safari, actively compensate scroll by negating
+  // vertical position changes of the task card across a burst of resizes.
+  const startCardScrollCompensator = (id: string): (() => void) => {
+    try {
+      const el = cardRefs.current[id];
+      if (!el || typeof ResizeObserver === 'undefined') return () => {};
+      let lastTop = el.getBoundingClientRect().top;
+      const observer = new ResizeObserver(() => {
+        try {
+          const currentTop = el.getBoundingClientRect().top;
+          const delta = currentTop - lastTop;
+          if (delta !== 0) {
+            window.scrollBy(0, delta);
+            lastTop = currentTop; // keep tracking relative to last applied position
+          }
+        } catch {}
+      });
+      observer.observe(el);
+      return () => { try { observer.disconnect(); } catch {} };
+    } catch { return () => {}; }
+  };
+
   const withPreservedCardOffset = (taskId: string, fn: () => void) => {
     // If scroll is frozen, avoid additional scroll adjustments that can fight WebKit
     if (scrollLockState.current) {
@@ -852,11 +874,13 @@ const TutorialTasks: React.FC = () => {
       return;
     }
 
+    let stopCompLocal: (() => void) | null = null;
     try {
       setMutatingTaskId(taskId);
       if (isSafari) {
         try { (document.activeElement as HTMLElement | null)?.blur?.(); } catch {}
         freezeScroll();
+        stopCompLocal = startCardScrollCompensator(taskId);
       }
       lockListHeight();
       lockCardHeightById(taskId);
@@ -923,7 +947,7 @@ const TutorialTasks: React.FC = () => {
         unlockListHeight();
         unlockCardHeightById(taskId);
         unlockGridHeightById(taskId);
-        if (isSafari) unfreezeScroll();
+        if (isSafari) { try { stopCompLocal?.(); } catch {}; unfreezeScroll(); }
       };
       if (isSafari) {
         requestAnimationFrame(() => requestAnimationFrame(() => requestAnimationFrame(release)));
@@ -975,9 +999,10 @@ const TutorialTasks: React.FC = () => {
   const handleDeleteSubmission = async (submissionId: string, taskId?: string) => {
 
 
+    let stopCompLocal: (() => void) | null = null;
     try {
       if (taskId) setMutatingTaskId(taskId);
-      if (isSafari) freezeScroll();
+      if (isSafari) { freezeScroll(); stopCompLocal = startCardScrollCompensator(taskId || ''); }
       lockListHeight();
       const response = await api.delete(`/api/submissions/${submissionId}`);
 
@@ -1028,7 +1053,7 @@ const TutorialTasks: React.FC = () => {
         unlockCardHeightById(taskId);
         unlockGridHeightById(taskId);
       }
-      if (isSafari) unfreezeScroll();
+      if (isSafari) { try { stopCompLocal?.(); } catch {}; unfreezeScroll(); }
       setMutatingTaskId(null);
     }));
   };
@@ -2295,7 +2320,7 @@ const TutorialTasks: React.FC = () => {
 
                 {/* All Submissions for this Task */}
                 {userSubmissions[task._id] && userSubmissions[task._id].length > 0 && (
-                  <div ref={(el) => { submissionsContainerRefs.current[task._id] = el; }} className="bg-gradient-to-r from-white to-indigo-50 rounded-xl p-6 mb-6 border border-stone-200" style={{ overflowAnchor: 'none' }}>
+                  <div ref={(el) => { submissionsContainerRefs.current[task._id] = el; }} className="bg-gradient-to-r from-white to-indigo-50 rounded-xl p-6 mb-6 border border-stone-200" style={{ overflowAnchor: 'none', contain: isSafari ? ('layout paint size' as any) : undefined, transform: isSafari ? 'translateZ(0)' : undefined, willChange: isSafari ? ('contents' as any) : undefined }}>
                     <div className="flex items-center justify-between mb-4">
                       <div className="flex items-center space-x-2">
                         <div className="bg-indigo-100 rounded-full p-1">
@@ -2322,7 +2347,7 @@ const TutorialTasks: React.FC = () => {
                       expandedSections[task._id] 
                         ? 'max-h-none overflow-visible' 
                         : 'max-h-0 overflow-hidden'
-                    }`}>
+                    }`} style={{ contain: isSafari ? ('layout paint size' as any) : undefined, transform: isSafari ? 'translateZ(0)' : undefined, willChange: isSafari ? ('contents' as any) : undefined }}>
                       {userSubmissions[task._id].map((submission, index) => (
                         <div key={submission._id} className="bg-white rounded-lg p-3 border border-stone-200 flex flex-col justify-between h-full">
                           <div className="flex items-center justify-between mb-2">