Upload folder using huggingface_hub

client/src/pages/TutorialTasks.tsx

@@ -71,6 +71,8 @@ const TutorialTasks: React.FC = () => {
   const [expandedSections, setExpandedSections] = useState<{[key: string]: boolean}>({});
   const [lockedCardHeights, setLockedCardHeights] = useState<{[key: string]: number}>({});
   const cardRefs = useRef<{[key: string]: HTMLDivElement | null}>({});
+  const [listLockedHeight, setListLockedHeight] = useState<number | null>(null);
+  const listRef = useRef<HTMLDivElement | null>(null);
 
   // 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') => {
@@ -1131,6 +1133,16 @@ const TutorialTasks: React.FC = () => {
     });
   };
 
+  const lockListHeight = () => {
+    try {
+      const el = listRef.current;
+      if (!el) return;
+      const h = el.getBoundingClientRect().height;
+      if (h && h > 0) setListLockedHeight(Math.ceil(h));
+    } catch {}
+  };
+  const unlockListHeight = () => setListLockedHeight(null);
+
   return (
     <div className="min-h-screen bg-white py-8">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -1653,6 +1665,7 @@ const TutorialTasks: React.FC = () => {
             </div>
           )}
 
+          <div ref={listRef} style={listLockedHeight ? { height: 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" />
@@ -1882,9 +1895,9 @@ const TutorialTasks: React.FC = () => {
                                       <label className="block text-xs font-medium text-gray-700 mb-1">Select Your Group</label>
                                       <select
                                         value={selectedGroups[task._id] || ''}
-                                        onFocus={() => lockCardHeight(task._id)}
-                                        onChange={(e) => { lockCardHeight(task._id); setSelectedGroups({ ...selectedGroups, [task._id]: parseInt(e.target.value) }); }}
-                                        onBlur={() => unlockCardHeight(task._id)}
+                                        onFocus={() => { lockListHeight(); lockCardHeight(task._id); }}
+                                        onChange={(e) => { lockListHeight(); lockCardHeight(task._id); 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"
                                       >
                                         <option value="">Choose...</option>
@@ -1899,17 +1912,17 @@ const TutorialTasks: React.FC = () => {
                                       <textarea
                                         id={`tutorial-translation-${task._id}`}
                                         value={translationText[task._id] || ''}
-                                        onFocus={() => lockCardHeight(task._id)}
-                                        onInput={() => lockCardHeight(task._id)}
+                                        onFocus={() => { lockListHeight(); lockCardHeight(task._id); }}
+                                        onInput={() => { lockListHeight(); lockCardHeight(task._id); }}
                                         onChange={(e) => setTranslationText({ ...translationText, [task._id]: e.target.value })}
-                                        onBlur={() => unlockCardHeight(task._id)}
+                                        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' }}
                                         rows={4}
                                         placeholder="Enter your group's translation here..."
                                       />
                                     <div className="flex justify-end mt-2">
-                                      <button onClick={() => { lockCardHeight(task._id); handleSubmitTranslation(task._id).finally(() => setTimeout(() => unlockCardHeight(task._id), 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); 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>
                                 )}
@@ -2156,6 +2169,7 @@ const TutorialTasks: React.FC = () => {
               </div>
             ))
           )}
+          </div>
         </div>
         </>
         )}