From 92e63c4a80664af58828337b2c0338c3055db167 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Wed, 15 Oct 2025 16:52:48 +0000
Subject: [PATCH] feat: Implement 3-column layout for content submissions

---
 src/components/moderation/QueueItem.tsx | 59 ++++++++++++++++++++-----
 1 file changed, 48 insertions(+), 11 deletions(-)

diff --git a/src/components/moderation/QueueItem.tsx b/src/components/moderation/QueueItem.tsx
index 049df32e..b58f3818 100644
--- a/src/components/moderation/QueueItem.tsx
+++ b/src/components/moderation/QueueItem.tsx
@@ -239,9 +239,13 @@ export const QueueItem = memo(({
       </CardHeader>
       
       <CardContent className={`${isMobile ? 'p-4 pt-0 space-y-4' : 'p-6 pt-0'}`}>
-        <div className={`bg-muted/50 rounded-lg ${isMobile ? 'p-3 space-y-3' : 'p-4'} ${
-          !isMobile ? 'lg:grid lg:grid-cols-[1fr,320px] lg:gap-6' : ''
-        }`}>
+      <div className={`bg-muted/50 rounded-lg ${isMobile ? 'p-3 space-y-3' : 'p-4'} ${
+        !isMobile 
+          ? item.type === 'content_submission'
+            ? 'lg:grid lg:grid-cols-[1fr,320px] lg:gap-6 2xl:grid-cols-[1fr,400px,320px] 2xl:gap-6'
+            : 'lg:grid lg:grid-cols-[1fr,320px] lg:gap-6'
+          : ''
+      }`}>
           {item.type === 'review' ? (
             <div>
               {item.content.title && (
@@ -359,14 +363,47 @@ export const QueueItem = memo(({
               )}
             </div>
           ) : (
-            <div>
-              {/* Composite Submissions or Standard Submissions */}
-              <SubmissionItemsList 
-                submissionId={item.id}
-                view="detailed"
-                showImages={true}
-              />
-            </div>
+            <>
+              {/* Main content area - spans 1st column on all layouts */}
+              <div>
+                <SubmissionItemsList 
+                  submissionId={item.id}
+                  view="detailed"
+                  showImages={true}
+                />
+              </div>
+              
+              {/* Middle column for wide screens - shows extended submission details */}
+              {!isMobile && item.type === 'content_submission' && (
+                <div className="hidden 2xl:block space-y-3">
+                  <div className="bg-card rounded-md border p-3">
+                    <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
+                      Review Summary
+                    </div>
+                    <div className="text-sm space-y-2">
+                      <div>
+                        <span className="text-muted-foreground">Type:</span>{' '}
+                        <span className="font-medium">{item.submission_type}</span>
+                      </div>
+                      {item.submission_items && item.submission_items.length > 0 && (
+                        <div>
+                          <span className="text-muted-foreground">Items:</span>{' '}
+                          <span className="font-medium">{item.submission_items.length}</span>
+                        </div>
+                      )}
+                      {item.status === 'partially_approved' && (
+                        <div>
+                          <span className="text-muted-foreground">Status:</span>{' '}
+                          <span className="font-medium text-yellow-600 dark:text-yellow-400">
+                            Partially Approved
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </>
           )}
           
           {/* Right sidebar on desktop: metadata & context */}