From 644e915096d1a1d1e9cd9bf2e2e3ccb7d22345a2 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 15:12:36 +0000
Subject: [PATCH] Refactor: Improve moderation queue layout

---
 src/components/moderation/ModerationQueue.tsx |  2 +-
 src/components/moderation/QueueItem.tsx       | 43 +++++++++++--------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/moderation/ModerationQueue.tsx b/src/components/moderation/ModerationQueue.tsx
index 5c26b15a..9201ddd2 100644
--- a/src/components/moderation/ModerationQueue.tsx
+++ b/src/components/moderation/ModerationQueue.tsx
@@ -192,7 +192,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
         />
       ) : (
         <TooltipProvider>
-          <div className={isMobile ? 'space-y-6' : 'grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6'}>
+          <div className="space-y-6">
             {queueManager.items.map((item, index) => (
               <QueueItem
                 key={item.id}
diff --git a/src/components/moderation/QueueItem.tsx b/src/components/moderation/QueueItem.tsx
index d535d9d8..9d85d08b 100644
--- a/src/components/moderation/QueueItem.tsx
+++ b/src/components/moderation/QueueItem.tsx
@@ -108,7 +108,7 @@ export const QueueItem = memo(({
   return (
     <Card 
       key={item.id} 
-      className={`h-full border-l-4 transition-all duration-300 ${
+      className={`border-l-4 transition-all duration-300 ${
         item._removing ? 'opacity-0 scale-95 pointer-events-none' : ''
       } ${
         hasModeratorEdits ? 'ring-2 ring-blue-200 dark:ring-blue-800' : ''
@@ -233,8 +233,8 @@ export const QueueItem = memo(({
         )}
       </CardHeader>
       
-      <CardContent className={`space-y-4 ${isMobile ? 'p-4 pt-0' : ''}`}>
-        <div className={`bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4'}`}>
+      <CardContent className={`${isMobile ? 'p-4 pt-0 space-y-4' : 'grid grid-cols-1 lg:grid-cols-2 gap-6'}`}>
+        <div className={`bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4'} ${isMobile ? '' : 'lg:col-span-1'}`}>
           {item.type === 'review' ? (
             <div>
               {item.content.title && (
@@ -363,7 +363,27 @@ export const QueueItem = memo(({
           )}
         </div>
         
-        {/* Action buttons based on status */}
+        {/* Notes and metadata column on desktop */}
+        <div className={`space-y-4 ${isMobile ? '' : 'lg:col-span-1'}`}>
+          {(item.status === 'pending' || item.status === 'flagged') && (
+            <div className="space-y-2">
+              <Label htmlFor={`notes-${item.id}`}>Moderation Notes</Label>
+              <Textarea
+                id={`notes-${item.id}`}
+                placeholder="Add notes about your moderation decision..."
+                value={notes[item.id] || ''}
+                onChange={(e) => onNoteChange(item.id, e.target.value)}
+                onFocus={() => onInteractionFocus(item.id)}
+                onBlur={() => onInteractionBlur(item.id)}
+                rows={isMobile ? 2 : 6}
+                disabled={isLockedByOther || currentLockSubmissionId !== item.id}
+              />
+            </div>
+          )}
+        </div>
+        
+        {/* Action buttons - full width below columns */}
+        <div className={`${isMobile ? '' : 'lg:col-span-2'} space-y-4`}>
         {(item.status === 'pending' || item.status === 'flagged') && (
           <>
             {/* Claim button for unclaimed submissions */}
@@ -399,20 +419,6 @@ export const QueueItem = memo(({
               </div>
             )}
             
-            <div className="space-y-2">
-              <Label htmlFor={`notes-${item.id}`}>Moderation Notes (optional)</Label>
-              <Textarea
-                id={`notes-${item.id}`}
-                placeholder="Add notes about your moderation decision..."
-                value={notes[item.id] || ''}
-                onChange={(e) => onNoteChange(item.id, e.target.value)}
-                onFocus={() => onInteractionFocus(item.id)}
-                onBlur={() => onInteractionBlur(item.id)}
-                rows={2}
-                disabled={isLockedByOther || currentLockSubmissionId !== item.id}
-              />
-            </div>
-            
             <div className={isMobile ? 'flex flex-col gap-2 pt-2' : 'grid grid-cols-2 lg:grid-cols-4 gap-2 pt-2'}>
               {/* Show Review Items button for content submissions */}
               {item.type === 'content_submission' && (
@@ -622,6 +628,7 @@ export const QueueItem = memo(({
             </Button>
           </div>
         )}
+        </div>
       </CardContent>
     </Card>
   );