Fix layout logic: Add Task uses side-by-side for ALL weeks, Add Image uses dynamic layout, fix WeeklyPractice image display

client/src/pages/TutorialTasks.tsx

@@ -1398,9 +1398,9 @@ const TutorialTasks: React.FC = () => {
                     ) : (
                       <div className="space-y-4">
                         {task.imageUrl ? (
-                          // Different layout based on task's week number
-                          task.weekNumber >= 3 ? (
-                            // Week 3+ layout with dynamic sizing and alignment
+                          // Check if this is an image-only task (created via "Add Image" function)
+                          task.content === 'Image-based task' ? (
+                            // Image-only layout with dynamic sizing and alignment
                             <div className={`flex flex-col md:flex-row gap-6 items-start ${
                               task.imageAlignment === 'left' ? 'md:flex-row' : 
                               task.imageAlignment === 'right' ? 'md:flex-row-reverse' : 
@@ -1436,19 +1436,9 @@ const TutorialTasks: React.FC = () => {
                                   )}
                                 </div>
                               </div>
-                              {/* Text section - only show if content exists and is not image-only */}
-                              {task.content && task.content !== 'Image-based task' && (
-                                <div className={`${
-                                  task.imageAlignment === 'left' ? 'w-full md:w-1/2' :
-                                  task.imageAlignment === 'right' ? 'w-full md:w-1/2' :
-                                  'w-full'
-                                }`}>
-                                  <div className="text-indigo-900 leading-relaxed text-lg font-source-text whitespace-pre-wrap">{task.content}</div>
-                                </div>
-                              )}
                             </div>
                           ) : (
-                            // Week 1-2 layout (original side-by-side)
+                            // Regular task layout (original side-by-side for ALL weeks)
                             <div className="flex flex-col md:flex-row gap-6 items-start">
                               {/* Image on the left - 50% width */}
                               <div className="w-full md:w-1/2 flex justify-center">
@@ -1576,8 +1566,8 @@ const TutorialTasks: React.FC = () => {
                   </div>
                 )}
 
-                                  {/* Translation Input (always show if user is logged in, but hide for image-only content in week 3+) */}
-                  {localStorage.getItem('token') && !(task.weekNumber >= 3 && task.content === 'Image-based task') && (
+                                  {/* Translation Input (always show if user is logged in, but hide for image-only content) */}
+                  {localStorage.getItem('token') && task.content !== 'Image-based task' && (
                   <div className="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
                     <div className="flex items-center space-x-3 mb-4">
                       <div className="bg-gray-100 rounded-lg p-2">

client/src/pages/WeeklyPractice.tsx

@@ -2030,43 +2030,25 @@ const WeeklyPractice: React.FC = () => {
                       </div>
                     ) : (
                       <div>
-                        {practice.imageUrl && practice.weekNumber >= 3 ? (
-                          <div className={`flex flex-col md:flex-row gap-6 items-start ${
-                            practice.imageAlignment === 'left' ? 'md:flex-row' : 
-                            practice.imageAlignment === 'right' ? 'md:flex-row-reverse' : 
-                            'md:flex-col'
-                          }`}>
-                            {/* Image with dynamic alignment */}
-                            <div className={`${
-                              practice.imageAlignment === 'left' ? 'w-full md:w-1/2' :
-                              practice.imageAlignment === 'right' ? 'w-full md:w-1/2' :
-                              'w-full'
-                            } flex ${
-                              practice.imageAlignment === 'left' ? 'justify-start' :
-                              practice.imageAlignment === 'right' ? 'justify-end' :
-                              'justify-center'
+                        {practice.imageUrl ? (
+                          // Check if this is an image-only practice (created via "Add Image" function)
+                          practice.content === 'Image-based practice' ? (
+                            // Image-only layout with dynamic sizing and alignment
+                            <div className={`flex flex-col md:flex-row gap-6 items-start ${
+                              practice.imageAlignment === 'left' ? 'md:flex-row' : 
+                              practice.imageAlignment === 'right' ? 'md:flex-row-reverse' : 
+                              'md:flex-col'
                             }`}>
-                              {practice.imageUrl.startsWith('data:') ? (
-                                <div className="inline-block rounded-lg shadow-md overflow-hidden">
-                                  <img 
-                                    src={practice.imageUrl} 
-                                    alt={practice.imageAlt || 'Uploaded image'}
-                                    className="w-full h-auto"
-                                    style={{ 
-                                      height: `${practice.imageSize || 200}px`, 
-                                      width: 'auto', 
-                                      objectFit: 'contain' 
-                                    }}
-                                    onError={(e) => {
-                                      console.error('Error loading image:', e);
-                                      e.currentTarget.style.display = 'none';
-                                    }}
-                                  />
-                                  {practice.imageAlt && (
-                                    <div className="text-xs text-gray-500 mt-2 text-center">Alt: {practice.imageAlt}</div>
-                                  )}
-                                </div>
-                              ) : (
+                              {/* Image section */}
+                              <div className={`${
+                                practice.imageAlignment === 'left' ? 'w-full md:w-1/2' :
+                                practice.imageAlignment === 'right' ? 'w-full md:w-1/2' :
+                                'w-full'
+                              } flex ${
+                                practice.imageAlignment === 'left' ? 'justify-start' :
+                                practice.imageAlignment === 'right' ? 'justify-end' :
+                                'justify-center'
+                              }`}>
                                 <div className="inline-block rounded-lg shadow-md overflow-hidden">
                                   <img 
                                     src={practice.imageUrl} 
@@ -2080,38 +2062,50 @@ const WeeklyPractice: React.FC = () => {
                                     onError={(e) => {
                                       console.error('Error loading image:', e);
                                       e.currentTarget.style.display = 'none';
-                                      // Show fallback if image fails to load
-                                      const fallback = e.currentTarget.parentElement;
-                                      if (fallback) {
-                                        fallback.innerHTML = `
-                                          <div class="inline-block rounded-lg shadow-md bg-green-500 text-white p-6 text-center">
-                                            <div class="text-3xl mb-2">📷</div>
-                                            <div class="font-semibold">Image Uploaded</div>
-                                            <div class="text-sm opacity-75">${practice.imageUrl}</div>
-                                            ${practice.imageAlt ? `<div class="text-xs opacity-50 mt-2">Alt: ${practice.imageAlt}</div>` : ''}
-                                          </div>
-                                        `;
-                                      }
                                     }}
                                   />
                                   {practice.imageAlt && (
                                     <div className="text-xs text-gray-500 mt-2 text-center">Alt: {practice.imageAlt}</div>
                                   )}
                                 </div>
-                              )}
+                              </div>
                             </div>
-                            {/* Text with conditional display */}
-                            {practice.content && practice.content !== 'Image-based practice' && (
-                              <div className={`${
-                                practice.imageAlignment === 'left' ? 'w-full md:w-1/2' :
-                                practice.imageAlignment === 'right' ? 'w-full md:w-1/2' :
-                                'w-full'
-                              }`}>
+                          ) : (
+                            // Regular practice layout (original side-by-side for ALL weeks)
+                            <div className="flex flex-col md:flex-row gap-6 items-start">
+                              {/* Image on the left - 50% width */}
+                              <div className="w-full md:w-1/2 flex justify-center">
+                                {practice.imageUrl.startsWith('data:') ? (
+                                  // Show actual image if it's a data URL
+                                  <div className="inline-block rounded-lg shadow-md overflow-hidden">
+                                    <img 
+                                      src={practice.imageUrl} 
+                                      alt={practice.imageAlt || 'Uploaded image'}
+                                      className="w-full h-auto"
+                                      style={{ height: '200px', width: 'auto', objectFit: 'contain' }} // Fixed height for consistency
+                                      onError={(e) => {
+                                        console.error('Error loading image:', e);
+                                        e.currentTarget.style.display = 'none';
+                                      }}
+                                    />
+                                  </div>
+                                ) : (
+                                  // Show placeholder if it's not a data URL
+                                  <div className="inline-block rounded-lg shadow-md bg-green-500 text-white p-6 text-center">
+                                    <div className="text-3xl mb-2">📷</div>
+                                    <div className="font-semibold">Image Uploaded</div>
+                                    <div className="text-sm opacity-75">{practice.imageUrl}</div>
+                                  </div>
+                                )}
+                              </div>
+                              {/* Text on the right - 50% width */}
+                              <div className="w-full md:w-1/2">
                                 <p className="text-orange-800 leading-relaxed text-lg font-source-text whitespace-pre-wrap">{practice.content}</p>
                               </div>
-                            )}
-                          </div>
+                            </div>
+                          )
                         ) : (
+                          // Text only when no image
                           <p className="text-orange-800 leading-relaxed text-lg font-source-text whitespace-pre-wrap">{practice.content}</p>
                         )}
                       </div>
@@ -2198,8 +2192,8 @@ const WeeklyPractice: React.FC = () => {
                   </div>
                 )}
 
-                {/* Translation Input (only show if user is logged in and has no submission, and not for image-only content in week 3+) */}
-                {localStorage.getItem('token') && (!userSubmissions[practice._id] || userSubmissions[practice._id].length === 0) && !(practice.weekNumber >= 3 && practice.content === 'Image-based practice') && (
+                {/* Translation Input (only show if user is logged in and has no submission, but hide for image-only content) */}
+                {localStorage.getItem('token') && (!userSubmissions[practice._id] || userSubmissions[practice._id].length === 0) && practice.content !== 'Image-based practice' && (
                   <div className="bg-gradient-to-r from-purple-50 to-violet-50 rounded-xl p-6 border border-purple-200">
                     <div className="flex items-center space-x-2 mb-4">
                       <div className="bg-purple-100 rounded-full p-1">