Fix validation errors and display

src/components/moderation/QueueItem.tsx

@@ -158,15 +158,17 @@ export const QueueItem = memo(({
                 Claimed by You
               </Badge>
             )}
+            {item.submission_type && (
               <ValidationSummary
                 item={{
-                  item_type: item.submission_type || 'submission',
+                  item_type: item.submission_type,
                   item_data: item.content,
                   id: item.id,
                 }}
                 compact={true}
                 onValidationChange={setValidationResult}
               />
+            )}
           </div>
           <div className={`flex items-center gap-2 text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
             <Calendar className={isMobile ? "w-3 h-3" : "w-4 h-4"} />

src/components/moderation/ValidationSummary.tsx

@@ -3,7 +3,6 @@ import { AlertCircle, CheckCircle, Info, AlertTriangle } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { validateEntityData, ValidationResult } from '@/lib/entityValidationSchemas';
 
 interface ValidationSummaryProps {
@@ -25,10 +24,18 @@ export function ValidationSummary({ item, onValidationChange, compact = false }:
     async function validate() {
       setIsLoading(true);
       try {
+        console.log('Validating submission:', {
+          type: item.item_type,
+          data: item.item_data,
+          id: item.id
+        });
+        
         const result = await validateEntityData(
           item.item_type as any,
           { ...item.item_data, id: item.id }
         );
+        
+        console.log('Validation result:', result);
         setValidationResult(result);
         onValidationChange?.(result);
       } catch (error) {
@@ -73,107 +80,62 @@ export function ValidationSummary({ item, onValidationChange, compact = false }:
   const hasSuggestions = validationResult.suggestions.length > 0;
   const hasAnyIssues = hasBlockingErrors || hasWarnings || hasSuggestions;
 
-  // Compact view (for queue items)
+  // Compact view (for queue items) - NO HOVER, ALWAYS VISIBLE
   if (compact) {
     return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div className="flex items-center gap-2 cursor-help">
-              {validationResult.isValid && !hasWarnings && !hasSuggestions && (
-                <Badge variant="secondary" className="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-300 dark:border-green-700">
-                  <CheckCircle className="w-3 h-3 mr-1" />
-                  Valid
-                </Badge>
-              )}
-              {hasBlockingErrors && (
-                <Badge variant="destructive">
-                  <AlertCircle className="w-3 h-3 mr-1" />
-                  {validationResult.blockingErrors.length} Error{validationResult.blockingErrors.length !== 1 ? 's' : ''}
-                </Badge>
-              )}
-              {hasWarnings && !hasBlockingErrors && (
-                <Badge variant="outline" className="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700">
-                  <AlertTriangle className="w-3 h-3 mr-1" />
-                  {validationResult.warnings.length} Warning{validationResult.warnings.length !== 1 ? 's' : ''}
-                </Badge>
-              )}
-              {hasSuggestions && !hasBlockingErrors && !hasWarnings && (
-                <Badge variant="outline" className="bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-300 dark:border-blue-700">
-                  <Info className="w-3 h-3 mr-1" />
-                  {validationResult.suggestions.length} Suggestion{validationResult.suggestions.length !== 1 ? 's' : ''}
-                </Badge>
-              )}
-            </div>
-          </TooltipTrigger>
-          
-          {hasAnyIssues && (
-            <TooltipContent side="right" className="max-w-md">
-              <div className="space-y-2">
-                {hasBlockingErrors && (
-                  <div>
-                    <p className="font-semibold text-red-600 dark:text-red-400 text-xs mb-1">
-                      Blocking Errors:
-                    </p>
-                    <ul className="text-xs space-y-1">
-                      {validationResult.blockingErrors.slice(0, 3).map((error, i) => (
-                        <li key={i} className="text-muted-foreground">
-                          • <span className="font-medium">{error.field}:</span> {error.message}
-                        </li>
-                      ))}
-                      {validationResult.blockingErrors.length > 3 && (
-                        <li className="text-muted-foreground italic">
-                          ... and {validationResult.blockingErrors.length - 3} more
-                        </li>
-                      )}
-                    </ul>
-                  </div>
-                )}
-                
-                {hasWarnings && (
-                  <div>
-                    <p className="font-semibold text-yellow-600 dark:text-yellow-400 text-xs mb-1">
-                      Warnings:
-                    </p>
-                    <ul className="text-xs space-y-1">
-                      {validationResult.warnings.slice(0, 3).map((warning, i) => (
-                        <li key={i} className="text-muted-foreground">
-                          • <span className="font-medium">{warning.field}:</span> {warning.message}
-                        </li>
-                      ))}
-                      {validationResult.warnings.length > 3 && (
-                        <li className="text-muted-foreground italic">
-                          ... and {validationResult.warnings.length - 3} more
-                        </li>
-                      )}
-                    </ul>
-                  </div>
-                )}
-
-                {hasSuggestions && !hasBlockingErrors && !hasWarnings && (
-                  <div>
-                    <p className="font-semibold text-blue-600 dark:text-blue-400 text-xs mb-1">
-                      Suggestions:
-                    </p>
-                    <ul className="text-xs space-y-1">
-                      {validationResult.suggestions.slice(0, 3).map((suggestion, i) => (
-                        <li key={i} className="text-muted-foreground">
-                          • <span className="font-medium">{suggestion.field}:</span> {suggestion.message}
-                        </li>
-                      ))}
-                      {validationResult.suggestions.length > 3 && (
-                        <li className="text-muted-foreground italic">
-                          ... and {validationResult.suggestions.length - 3} more
-                        </li>
-                      )}
-                    </ul>
-                  </div>
-                )}
-              </div>
-            </TooltipContent>
+      <div className="space-y-2">
+        {/* Status Badges */}
+        <div className="flex items-center gap-2 flex-wrap">
+          {validationResult.isValid && !hasWarnings && !hasSuggestions && (
+            <Badge variant="secondary" className="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-300 dark:border-green-700">
+              <CheckCircle className="w-3 h-3 mr-1" />
+              Valid
+            </Badge>
           )}
-        </Tooltip>
-      </TooltipProvider>
+          {hasBlockingErrors && (
+            <Badge variant="destructive">
+              <AlertCircle className="w-3 h-3 mr-1" />
+              {validationResult.blockingErrors.length} Error{validationResult.blockingErrors.length !== 1 ? 's' : ''}
+            </Badge>
+          )}
+          {hasWarnings && (
+            <Badge variant="outline" className="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700">
+              <AlertTriangle className="w-3 h-3 mr-1" />
+              {validationResult.warnings.length} Warning{validationResult.warnings.length !== 1 ? 's' : ''}
+            </Badge>
+          )}
+        </div>
+
+        {/* ALWAYS SHOW ERROR DETAILS - NO HOVER NEEDED */}
+        {hasBlockingErrors && (
+          <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-2">
+            <p className="text-xs font-semibold text-red-800 dark:text-red-300 mb-1">Blocking Errors:</p>
+            <ul className="text-xs space-y-0.5 text-red-700 dark:text-red-400">
+              {validationResult.blockingErrors.map((error, i) => (
+                <li key={i}>
+                  • <span className="font-medium">{error.field}:</span> {error.message}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {hasWarnings && !hasBlockingErrors && (
+          <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded p-2">
+            <p className="text-xs font-semibold text-yellow-800 dark:text-yellow-300 mb-1">Warnings:</p>
+            <ul className="text-xs space-y-0.5 text-yellow-700 dark:text-yellow-400">
+              {validationResult.warnings.slice(0, 3).map((warning, i) => (
+                <li key={i}>
+                  • <span className="font-medium">{warning.field}:</span> {warning.message}
+                </li>
+              ))}
+              {validationResult.warnings.length > 3 && (
+                <li className="italic">... and {validationResult.warnings.length - 3} more</li>
+              )}
+            </ul>
+          </div>
+        )}
+      </div>
     );
   }