bigger text box

frontend/src/pages/UploadPage/UploadPage.module.css

@@ -404,6 +404,40 @@
   border-top: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
 }
 
+.step2Layout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--go-ui-spacing-2xl);
+}
+
+.topRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--go-ui-spacing-2xl);
+  align-items: start;
+}
+
+.imageSection {
+  position: sticky;
+  top: var(--go-ui-spacing-lg);
+}
+
+.ratingSection {
+  display: flex;
+  flex-direction: column;
+}
+
+.ratingContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--go-ui-spacing-md);
+}
+
+.bottomRow {
+  width: 100%;
+}
+
+/* Support for step 2a layout (side-by-side) */
 .step2Layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -422,6 +456,13 @@
   gap: var(--go-ui-spacing-lg);
 }
 
+/* Support for step 2b layout (top row + bottom row) */
+.step2bLayout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--go-ui-spacing-2xl);
+}
+
 .contentColumn .formGrid {
   display: grid;
   gap: var(--go-ui-spacing-lg);
@@ -436,9 +477,18 @@
     gap: var(--go-ui-spacing-lg);
   }
   
+  .topRow {
+    grid-template-columns: 1fr;
+    gap: var(--go-ui-spacing-lg);
+  }
+  
   .mapColumn {
     position: static;
   }
+  
+  .imageSection {
+    position: static;
+  }
 }
 
 @media (max-width: 768px) {

frontend/src/pages/UploadPage/UploadPage.tsx

@@ -1271,33 +1271,33 @@ export default function UploadPage() {
         )}
 
         {step === '2b' && (
-          <div className={styles.step2Layout}>
-            <div className={styles.mapColumn}>
-              <Container heading="Uploaded Image" headingLevel={3} withHeaderBorder withInternalPadding>
-                <div className={styles.uploadedMapContainer}>
-                  <div className={styles.uploadedMapImage}>
-                    <img
-                      src={imageUrl || preview || undefined}
-                      alt="Uploaded image preview"
-                    />
-                  </div>
-                  <div className={styles.viewFullSizeButton}>
-                    <Button
-                      name="view-full-size"
-                      variant="secondary"
-                      size={1}
-                      onClick={() => setIsFullSizeModalOpen(true)}
-                    >
-                      View Image
-                    </Button>
+          <div className={styles.step2bLayout}>
+            {/* Top Row - Image and Rating horizontally aligned */}
+            <div className={styles.topRow}>
+              <div className={styles.imageSection}>
+                <Container heading="Uploaded Image" headingLevel={3} withHeaderBorder withInternalPadding>
+                  <div className={styles.uploadedMapContainer}>
+                    <div className={styles.uploadedMapImage}>
+                      <img
+                        src={imageUrl || preview || undefined}
+                        alt="Uploaded image preview"
+                      />
+                    </div>
+                    <div className={styles.viewFullSizeButton}>
+                      <Button
+                        name="view-full-size"
+                        variant="secondary"
+                        size={1}
+                        onClick={() => setIsFullSizeModalOpen(true)}
+                      >
+                        View Image
+                      </Button>
+                    </div>
                   </div>
-                </div>
-              </Container>
-            </div>
+                </Container>
+              </div>
 
-            {/* Right Column - Content */}
-            <div className={styles.contentColumn}>
-              {/* ────── RATING SLIDERS ────── */}
+              {/* Rating Section */}
               <div className={styles.metadataSectionCard}>
                 <Container
                   heading="AI Performance Rating"
@@ -1305,7 +1305,7 @@ export default function UploadPage() {
                   withHeaderBorder
                   withInternalPadding
                 >
-                  <div className={styles.ratingSection}>
+                  <div className={styles.ratingContent}>
                     {!isPerformanceConfirmed && (
                       <>
                         <p className={styles.ratingDescription}>How well did the AI perform on the task?</p>
@@ -1350,67 +1350,68 @@ export default function UploadPage() {
                   </div>
                 </Container>
               </div>
+            </div>
 
-              <div className={styles.metadataSectionCard}>
-                <Container
-                  heading="Generated Text"
-                  headingLevel={3}
-                  withHeaderBorder
-                  withInternalPadding
-                >
-                  <div className="text-left space-y-4">
-                    <div>
-                      <TextArea
-                        name="generatedContent"
-                        value={`Description:\n${description || 'AI-generated description will appear here...'}\n\nAnalysis:\n${analysis || 'AI-generated analysis will appear here...'}\n\nRecommended Actions:\n${recommendedActions || 'AI-generated recommended actions will appear here...'}`}
-                        onChange={(value) => {
-                          // Parse the combined text back into separate fields
-                          if (value) {
-                            const lines = value.split('\n');
-                            const descIndex = lines.findIndex(line => line.startsWith('Description:'));
-                            const analysisIndex = lines.findIndex(line => line.startsWith('Analysis:'));
-                            const actionsIndex = lines.findIndex(line => line.startsWith('Recommended Actions:'));
-                            
-                            if (descIndex !== -1 && analysisIndex !== -1 && actionsIndex !== -1) {
-                              setDescription(lines.slice(descIndex + 1, analysisIndex).join('\n').trim());
-                              setAnalysis(lines.slice(analysisIndex + 1, actionsIndex).join('\n').trim());
-                              setRecommendedActions(lines.slice(actionsIndex + 1).join('\n').trim());
-                            }
+            {/* Bottom Row - Generated Text spanning full width */}
+            <div className={styles.metadataSectionCard}>
+              <Container
+                heading="Generated Text"
+                headingLevel={3}
+                withHeaderBorder
+                withInternalPadding
+              >
+                <div className="text-left space-y-4">
+                  <div>
+                    <TextArea
+                      name="generatedContent"
+                      value={`Description:\n${description || 'AI-generated description will appear here...'}\n\nAnalysis:\n${analysis || 'AI-generated analysis will appear here...'}\n\nRecommended Actions:\n${recommendedActions || 'AI-generated recommended actions will appear here...'}`}
+                      onChange={(value) => {
+                        // Parse the combined text back into separate fields
+                        if (value) {
+                          const lines = value.split('\n');
+                          const descIndex = lines.findIndex(line => line.startsWith('Description:'));
+                          const analysisIndex = lines.findIndex(line => line.startsWith('Analysis:'));
+                          const actionsIndex = lines.findIndex(line => line.startsWith('Recommended Actions:'));
+                          
+                          if (descIndex !== -1 && analysisIndex !== -1 && actionsIndex !== -1) {
+                            setDescription(lines.slice(descIndex + 1, analysisIndex).join('\n').trim());
+                            setAnalysis(lines.slice(analysisIndex + 1, actionsIndex).join('\n').trim());
+                            setRecommendedActions(lines.slice(actionsIndex + 1).join('\n').trim());
                           }
-                        }}
-                        rows={12}
-                        placeholder="AI-generated content will appear here..."
-                      />
-                    </div>
-                  </div>
-                  
-                  {/* ────── SUBMIT BUTTONS ────── */}
-                  <div className={styles.submitSection}>
-                    <Button
-                      name="back"
-                      variant="secondary"
-                      onClick={() => handleStepChange('2a')}
-                    >
-                      Back
-                    </Button>
-                    <IconButton
-                      name="delete"
-                      variant="tertiary"
-                      onClick={handleDelete}
-                      title="Delete"
-                      ariaLabel="Delete uploaded image"
-                    >
-                      <DeleteBinLineIcon />
-                    </IconButton>
-                    <Button
-                      name="submit"
-                      onClick={handleSubmit}
-                    >
-                      Submit
-                    </Button>
+                        }
+                      }}
+                      rows={12}
+                      placeholder="AI-generated content will appear here..."
+                    />
                   </div>
-                </Container>
-              </div>
+                </div>
+                
+                {/* ────── SUBMIT BUTTONS ────── */}
+                <div className={styles.submitSection}>
+                  <Button
+                    name="back"
+                    variant="secondary"
+                    onClick={() => handleStepChange('2a')}
+                  >
+                    Back
+                  </Button>
+                  <IconButton
+                    name="delete"
+                    variant="tertiary"
+                    onClick={handleDelete}
+                    title="Delete"
+                    ariaLabel="Delete uploaded image"
+                  >
+                    <DeleteBinLineIcon />
+                  </IconButton>
+                  <Button
+                    name="submit"
+                    onClick={handleSubmit}
+                  >
+                    Submit
+                  </Button>
+                </div>
+              </Container>
             </div>
           </div>
         )}