Upload folder using huggingface_hub

client/src/pages/TutorialTasks.tsx

@@ -73,6 +73,23 @@ const TutorialTasks: React.FC = () => {
   const cardRefs = useRef<{[key: string]: HTMLDivElement | null}>({});
   const [listLockedHeight, setListLockedHeight] = useState<number | null>(null);
   const listRef = useRef<HTMLDivElement | null>(null);
+  const withPreservedScroll = useRef<(fn: () => void) => void>();
+
+  // Initialize scroll preservation helper once
+  useEffect(() => {
+    withPreservedScroll.current = (fn: () => void) => {
+      try {
+        const y = window.scrollY;
+        fn();
+        // Restore immediately after next paint
+        requestAnimationFrame(() => {
+          window.scrollTo(0, y);
+        });
+      } catch {
+        fn();
+      }
+    };
+  }, []);
 
   // Move a task up or down by normalizing positions for the current visible list (weeks 4–6 only)
   const moveTask = async (taskId: string, direction: 'up' | 'down') => {
@@ -1665,7 +1682,7 @@ const TutorialTasks: React.FC = () => {
             </div>
           )}
 
-          <div ref={listRef} style={listLockedHeight ? { height: listLockedHeight } : undefined}>
+          <div ref={listRef} style={listLockedHeight ? { minHeight: listLockedHeight } : undefined}>
           {tutorialTasks.length === 0 && !addingTask ? (
             <div className="text-center py-12">
               <DocumentTextIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
@@ -1896,7 +1913,7 @@ const TutorialTasks: React.FC = () => {
                                       <select
                                         value={selectedGroups[task._id] || ''}
                                         onFocus={() => { lockListHeight(); lockCardHeight(task._id); }}
-                                        onChange={(e) => { lockListHeight(); lockCardHeight(task._id); setSelectedGroups({ ...selectedGroups, [task._id]: parseInt(e.target.value) }); }}
+                                        onChange={(e) => { lockListHeight(); lockCardHeight(task._id); (withPreservedScroll.current || ((fn)=>fn()))(() => setSelectedGroups({ ...selectedGroups, [task._id]: parseInt(e.target.value) })); }}
                                         onBlur={() => { unlockCardHeight(task._id); unlockListHeight(); }}
                                         className="w-40 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white text-xs"
                                       >
@@ -1913,8 +1930,8 @@ const TutorialTasks: React.FC = () => {
                                         id={`tutorial-translation-${task._id}`}
                                         value={translationText[task._id] || ''}
                                         onFocus={() => { lockListHeight(); lockCardHeight(task._id); }}
-                                        onInput={() => { lockListHeight(); lockCardHeight(task._id); }}
-                                        onChange={(e) => setTranslationText({ ...translationText, [task._id]: e.target.value })}
+                                        onInput={(e) => { lockListHeight(); lockCardHeight(task._id); (withPreservedScroll.current || ((fn)=>fn()))(() => setTranslationText({ ...translationText, [task._id]: (e.target as HTMLTextAreaElement).value })); }}
+                                        onChange={(e) => (withPreservedScroll.current || ((fn)=>fn()))(() => setTranslationText({ ...translationText, [task._id]: e.target.value }))}
                                         onBlur={() => { unlockCardHeight(task._id); unlockListHeight(); }}
                                         className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
                                         style={{ height: sourceHeights[task._id] ? `${sourceHeights[task._id]}px` : 'auto' }}
@@ -1922,7 +1939,7 @@ const TutorialTasks: React.FC = () => {
                                         placeholder="Enter your group's translation here..."
                                       />
                                     <div className="flex justify-end mt-2">
-                                      <button onClick={() => { lockListHeight(); lockCardHeight(task._id); handleSubmitTranslation(task._id).finally(() => setTimeout(() => { unlockCardHeight(task._id); unlockListHeight(); }, 300)); }} disabled={submitting[task._id]} className="btn-primary disabled:bg-gray-400 text-white px-4 py-2 rounded-lg text-sm">{submitting[task._id] ? 'Submitting...' : 'Submit Translation'}</button>
+                                      <button onClick={() => { lockListHeight(); lockCardHeight(task._id); (withPreservedScroll.current || ((fn)=>fn()))(() => {}); handleSubmitTranslation(task._id).finally(() => setTimeout(() => { unlockCardHeight(task._id); unlockListHeight(); }, 300)); }} disabled={submitting[task._id]} className="btn-primary disabled:bg-gray-400 text-white px-4 py-2 rounded-lg text-sm">{submitting[task._id] ? 'Submitting...' : 'Submit Translation'}</button>
                                     </div>
                                   </div>
                                 )}