Upload folder using huggingface_hub

client/public/rebuild-nonce.txt

@@ -1 +1 @@
-Rebuild nonce: 2025-10-25T16:25:33Z
+Rebuild nonce: 2025-10-25T16:35:45Z

client/src/index.css

@@ -26,6 +26,74 @@
       -webkit-backface-visibility: hidden;
     }
   }
+
+  /* Chrome-specific improvements */
+  html.is-chrome .safari-stable-form {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  html.is-chrome .safari-stable-form select {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    padding: 8px 12px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #374151;
+    transition: all 0.2s ease;
+  }
+
+  html.is-chrome .safari-stable-form select:focus {
+    outline: none;
+    border-color: #6366f1;
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+  }
+
+  html.is-chrome .safari-stable-form textarea {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    padding: 12px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #374151;
+    transition: all 0.2s ease;
+    resize: none;
+  }
+
+  html.is-chrome .safari-stable-form textarea:focus {
+    outline: none;
+    border-color: #6366f1;
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+  }
+
+  html.is-chrome .safari-stable-form button {
+    background: #6366f1;
+    color: #ffffff;
+    border: none;
+    border-radius: 8px;
+    padding: 8px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    cursor: pointer;
+  }
+
+  html.is-chrome .safari-stable-form button:hover {
+    background: #5856eb;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+  }
+
+  html.is-chrome .safari-stable-form button:disabled {
+    background: #9ca3af;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+  }
 }
 
 @layer components {

client/src/pages/TutorialTasks.tsx

@@ -1937,9 +1937,9 @@ const TutorialTasks: React.FC = () => {
                               </div>
                           </div>
                           ) : (
-                            // Regular task layout
-                            <div className="flex flex-col md:flex-row gap-6 items-start">
-                              <div className="w-full md:w-1/2 flex justify-center">
+                            // Regular task layout - use grid for stability
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
+                              <div className="w-full flex justify-center">
                                 {task.imageUrl.startsWith('data:') ? (
                                   <div className="inline-block rounded-lg shadow-md overflow-hidden">
                                     <img src={task.imageUrl} alt={task.imageAlt || 'Uploaded image'} className="w-full h-auto" style={{ height: '200px', width: 'auto', objectFit: 'contain' }} onError={(e) => { console.error('Image failed to load:', e); (e.currentTarget as HTMLImageElement).style.display = 'none'; }} />
@@ -1952,8 +1952,45 @@ const TutorialTasks: React.FC = () => {
                                   </div>
                                 )}
                               </div>
-                              <div className="w-full md:w-1/2">
-                                <div className="text-blue-800 leading-relaxed text-lg font-source-text whitespace-pre-wrap">{renderFormatted(task.content)}</div>
+                              <div className="w-full">
+                                <div className="bg-indigo-50 rounded-lg p-4 mb-4 border border-indigo-200">
+                                  <h5 className="text-indigo-900 font-semibold mb-2">Source Text</h5>
+                                  <div className="text-blue-800 leading-relaxed text-lg font-source-text whitespace-pre-wrap">{renderFormatted(task.content)}</div>
+                                </div>
+                                {localStorage.getItem('token') && (
+                                  <div className="bg-white rounded-lg p-4 border border-gray-200">
+                                    <h5 className="text-gray-900 font-semibold mb-2">Your Group's Translation</h5>
+                                    <div className="mb-2">
+                                      <label className="block text-xs font-medium text-gray-700 mb-1">Select Your Group</label>
+                                      <select
+                                        value={selectedGroups[task._id] || ''}
+                                        onChange={(e) => setSelectedGroups({ ...selectedGroups, [task._id]: parseInt(e.target.value) })}
+                                        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>
+                                        {[1,2,3,4,5,6,7,8].map((g) => (<option key={g} value={g}>Group {g}</option>))}
+                                      </select>
+                                    </div>
+                                    <div className="flex items-center justify-end space-x-2 mb-2">
+                                      <button onClick={() => applyInlineFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
+                                      <button onClick={() => applyInlineFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
+                                      <button onClick={() => applyLinkFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }))} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">Link</button>
+                                    </div>
+                                    <textarea
+                                      id={`tutorial-translation-${task._id}`}
+                                      value={translationText[task._id] || ''}
+                                      onInput={(e) => setTranslationText({ ...translationText, [task._id]: (e.target as HTMLTextAreaElement).value })}
+                                      onChange={(e) => setTranslationText({ ...translationText, [task._id]: e.target.value })}
+                                      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: '150px' }}
+                                      rows={4}
+                                      placeholder="Enter your group's translation here..."
+                                    />
+                                    <div className="flex justify-end mt-2">
+                                      <button onClick={() => handleSubmitTranslation(task._id)} 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>
+                                )}
                               </div>
                             </div>
                           )
@@ -2053,85 +2090,6 @@ const TutorialTasks: React.FC = () => {
                   </div>
                 )}
 
-                                  {/* Translation Input (always show if user is logged in, but hide for image-only content) */}
-                  {localStorage.getItem('token') && task.content !== 'Image-based task' && task.imageAlignment !== 'portrait-split' && (
-                                  <div className="bg-white rounded-lg p-6 border border-gray-200 shadow-sm safari-stable-form">
-                    <div className="flex items-center space-x-3 mb-4">
-                      <div className="bg-gray-100 rounded-lg p-2">
-                        <DocumentTextIcon className="h-4 w-4 text-gray-600" />
-                      </div>
-                      <h4 className="text-gray-900 font-semibold text-lg">Group Translation</h4>
-                    </div>
-                    
-                    {/* Group Selection */}
-                    <div className="mb-4">
-                      <label className="block text-sm font-medium text-gray-700 mb-2">
-                        Select Your Group *
-                      </label>
-                      <select
-                        value={selectedGroups[task._id] || ''}
-                        onChange={(e) => {
-                          const value = parseInt(e.target.value);
-                          setSelectedGroups({ ...selectedGroups, [task._id]: value });
-                        }}
-                        className="w-48 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white text-sm"
-                        required
-                      >
-                        <option value="">Choose your group...</option>
-                        {[1, 2, 3, 4, 5, 6, 7, 8].map((group) => (
-                          <option key={group} value={group}>
-                            Group {group}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-
-                    <div className="mb-4">
-                      <label className="block text-sm font-medium text-gray-700 mb-2">
-                        Your Group's Translation *
-                      </label>
-                      <div className="flex items-center justify-end space-x-2 mb-2">
-                        <button onClick={() => applyInlineFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
-                        <button onClick={() => applyInlineFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
-                        <button onClick={() => applyLinkFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }))} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">Link</button>
-                      </div>
-                      <textarea
-                        id={`tutorial-translation-${task._id}`}
-                        value={translationText[task._id] || ''}
-                        onInput={(e) => {
-                          const value = (e.target as HTMLTextAreaElement).value;
-                          setTranslationText({ ...translationText, [task._id]: value });
-                        }}
-                        onChange={(e) => {
-                          const value = e.target.value;
-                          setTranslationText({ ...translationText, [task._id]: value });
-                        }}
-                        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: '150px' }}
-                        rows={4}
-                        placeholder="Enter your group's translation here..."
-                      />
-                    </div>
-
-                    <button
-                      onClick={() => { (withPreservedScroll.current || ((fn)=>fn()))(() => {}); handleSubmitTranslation(task._id); }}
-                      disabled={submitting[task._id]}
-                      className="relative inline-flex items-center justify-center gap-2 px-4 py-2 rounded-2xl text-sm font-medium text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 shadow-[inset_0_1px_0_rgba(255,255,255,0.6),inset_0_-1px_0_rgba(0,0,0,0.12)] bg-sky-600/70 disabled:bg-gray-400"
-                    >
-                      {submitting[task._id] ? (
-                        <>
-                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-                          Submitting...
-                        </>
-                      ) : (
-                        <>
-                          Submit Group Translation
-                          <ArrowRightIcon className="h-4 w-4 ml-2" />
-                        </>
-                      )}
-                    </button>
-                  </div>
-                )}
 
                 {/* Show login message for visitors */}
                 {!localStorage.getItem('token') && (