Reverted to commit 415aa45f4c

src/components/moderation/QueueItem.tsx

@@ -233,8 +233,8 @@ export const QueueItem = memo(({
         )}
       </CardHeader>
       
-      <CardContent className={`${isMobile ? 'p-4 pt-0 space-y-4' : 'grid grid-cols-1 lg:grid-cols-2 gap-6'}`}>
+      <CardContent className={`space-y-4 ${isMobile ? 'p-4 pt-0' : ''}`}>
-        <div className={`bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4'} ${isMobile ? '' : 'lg:col-span-1'}`}>
+        <div className={`bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4'}`}>
           {item.type === 'review' ? (
             <div>
               {item.content.title && (
@@ -363,27 +363,7 @@ export const QueueItem = memo(({
           )}
         </div>
         
-        {/* Notes and metadata column on desktop */}
+        {/* Action buttons based on status */}
-        <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 */}
@@ -419,7 +399,21 @@ export const QueueItem = memo(({
               </div>
             )}
             
-            <div className={isMobile ? 'flex flex-col gap-2 pt-2' : 'grid grid-cols-2 lg:grid-cols-4 gap-2 pt-2'}>
+            <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={`flex gap-2 pt-2 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}>
               {/* Show Review Items button for content submissions */}
               {item.type === 'content_submission' && (
                 <>
@@ -427,7 +421,7 @@ export const QueueItem = memo(({
                     onClick={() => onOpenReviewManager(item.id)}
                     disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
                     variant="outline"
-                    className={isMobile ? 'h-11' : ''}
+                    className={`flex-1 ${isMobile ? 'h-11' : ''}`}
                     size={isMobile ? "default" : "default"}
                   >
                     <ListTree className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
@@ -459,7 +453,7 @@ export const QueueItem = memo(({
               <Button
                 onClick={() => onApprove(item, 'approved', notes[item.id])}
                 disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
-                className={isMobile ? 'h-11' : ''}
+                className={`flex-1 ${isMobile ? 'h-11' : ''}`}
                 size={isMobile ? "default" : "default"}
               >
                 <CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
@@ -469,7 +463,7 @@ export const QueueItem = memo(({
                 variant="destructive"
                 onClick={() => onApprove(item, 'rejected', notes[item.id])}
                 disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
-                className={isMobile ? 'h-11' : ''}
+                className={`flex-1 ${isMobile ? 'h-11' : ''}`}
                 size={isMobile ? "default" : "default"}
               >
                 <XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
@@ -628,7 +622,6 @@ export const QueueItem = memo(({
             </Button>
           </div>
         )}
-        </div>
       </CardContent>
     </Card>
   );

src/components/moderation/SubmissionChangesDisplay.tsx

@@ -126,7 +126,7 @@ export function SubmissionChangesDisplay({
         </div>
         
         {(changes.action === 'edit' || changes.action === 'create') && changes.totalChanges > 0 && (
-          <div className="flex flex-wrap gap-1 lg:grid lg:grid-cols-2 xl:grid-cols-3">
+          <div className="flex flex-wrap gap-1">
             {changes.fieldChanges.slice(0, 5).map((change, idx) => (
               <FieldDiff key={idx} change={change} compact />
             ))}

src/hooks/useModerationQueue.ts

@@ -231,7 +231,6 @@ export const useModerationQueue = (config?: UseModerationQueueConfig) => {
   const releaseLock = useCallback(async (submissionId: string): Promise<boolean> => {
     if (!user?.id) return false;
 
-    setIsLoading(true);
     try {
       const { data, error } = await supabase.rpc('release_submission_lock', {
         submission_id: submissionId,
@@ -251,11 +250,6 @@ export const useModerationQueue = (config?: UseModerationQueueConfig) => {
 
         fetchStats();
         
-        toast({
-          title: 'Lock Released',
-          description: 'You can now claim another submission',
-        });
-        
         // Trigger refresh callback
         if (onLockStateChange) {
           onLockStateChange();
@@ -267,16 +261,9 @@ export const useModerationQueue = (config?: UseModerationQueueConfig) => {
       return false;
     } catch (error: any) {
       console.error('Error releasing lock:', error);
-      toast({
-        title: 'Error',
-        description: error.message || 'Failed to release lock',
-        variant: 'destructive',
-      });
       return false;
-    } finally {
-      setIsLoading(false);
     }
-  }, [user, fetchStats, toast, onLockStateChange]);
+  }, [user, fetchStats]);
 
   // Get time remaining on current lock
   const getTimeRemaining = useCallback((): number | null => {