feat: Implement 3-column layout for content submissions

src/components/moderation/QueueItem.tsx

@@ -240,7 +240,11 @@ export const QueueItem = memo(({
       
       <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' : ''
+        !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>
@@ -359,14 +363,47 @@ export const QueueItem = memo(({
               )}
             </div>
           ) : (
+            <>
+              {/* Main content area - spans 1st column on all layouts */}
               <div>
-              {/* Composite Submissions or Standard Submissions */}
                 <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 */}