Fix file queue overflow for long filenames + score product-only shots neutrally

- File queue: add text-overflow ellipsis, min-width:0, flex-shrink:0 to
  prevent long filenames from pushing Pending/Remove buttons out of view
- text_readability: product-only images (no marketing text layout) now
  score 7/10 neutral instead of 1-2/10 critical fail. Hidden/invisible
  text in marketing layouts still scores 1-2.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

backend/visual_qc_apps/text_readability/app.py

@@ -57,12 +57,21 @@ If OCR LAYOUT MEASUREMENTS are provided at the end of this prompt, use the compu
    b. Are there empty areas where text would logically be placed but nothing is visible?
    c. If text appears to be missing or invisible, this is a CRITICAL FAIL — score 1-2/10
 
+IMPORTANT EXCEPTION — PRODUCT-ONLY IMAGES:
+If the asset is a PRODUCT-ONLY photograph (e.g., a product shot for a comparison table, product catalogue, or e-commerce listing) that intentionally contains NO marketing text at all — only the product and its packaging — then this check is NOT APPLICABLE. In this case:
+- Score 7/10 (neutral)
+- Set text_readability to "Not Applicable"
+- Explain that the asset is a product-only image with no marketing text to evaluate
+- This is DIFFERENT from an asset that has marketing text that is hidden or invisible (which should still score 1-2)
+The key distinction: a product-only shot has NO SPACE or LAYOUT designed for marketing text. An asset with hidden/invisible text has areas where text is expected but cannot be seen.
+
 === SCORING GUIDANCE ===
 - Score 9-10: All marketing text is clear, readable, well-spaced, good contrast
 - Score 7-8: Minor issues (slightly small disclaimer text, minor spacing concern)
+- Score 7: Product-only image with no marketing text present (neutral — not applicable)
 - Score 5-6: Moderate issues (some text hard to read, poor placement over busy area)
 - Score 3-4: Significant issues (major text elements hard to read, poor contrast, overlapping text)
-- Score 1-2: Critical failure (text invisible/hidden due to colour matching, major text completely unreadable, text missing entirely)
+- Score 1-2: Critical failure (text invisible/hidden due to colour matching, major text completely unreadable, text EXPECTED but missing)
 
 === PASS/FAIL CRITERIA ===
 - "Pass" if ALL marketing text elements are clear, readable, properly spaced, and no hidden/invisible text detected
@@ -70,7 +79,7 @@ If OCR LAYOUT MEASUREMENTS are provided at the end of this prompt, use the compu
 
 YOUR OUTPUT MUST BE a JSON code block:
 {
-  "text_readability": "Pass" or "Fail",
+  "text_readability": "Pass" or "Fail" or "Not Applicable",
   "readability_score": "High", "Medium", or "Low",
   "text_elements_found": ["List each marketing text element you identified"],
   "hidden_text_check": "Pass" or "Fail" or "Suspected — [describe what appears hidden]",
@@ -83,7 +92,7 @@ CRITICAL:
 1. Always provide detailed analysis of what text was found and evaluated
 2. Focus ONLY on marketing text, NOT product packaging text
 3. Actively LOOK FOR hidden/invisible text — do not just evaluate what is obviously visible
-4. If text appears to be missing or invisible, this is a critical failure (score 1-2)
+4. If text appears to be missing or invisible in an asset that HAS a marketing layout, this is a critical failure (score 1-2). But if the asset is a product-only shot with no marketing layout, score 7/10 neutral.
 5. Never return just "Pass" or "Fail" without explanation"""
         
         # Initialize the Flask app with the prompt

web_ui.html

@@ -1992,12 +1992,12 @@
 
                 return `
                     <div style="background: #f8f9fa; padding: 12px; margin-bottom: 10px; border-radius: 6px; border-left: 4px solid ${statusColor};">
-                        <div style="display: flex; justify-content: space-between; align-items: center;">
-                            <div style="flex: 1;">
-                                <strong>${item.file.name}</strong><br>
+                        <div style="display: flex; justify-content: space-between; align-items: center; gap: 12px;">
+                            <div style="flex: 1; min-width: 0; overflow: hidden;">
+                                <strong style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${item.file.name}</strong>
                                 <small style="color: #6c757d;">${fileSize} MB | ${item.file.type || 'Unknown type'}</small>
                             </div>
-                            <div style="text-align: right;">
+                            <div style="text-align: right; flex-shrink: 0;">
                                 <span style="background: ${statusColor}; color: white; padding: 4px 12px; border-radius: 4px; font-size: 0.85em;">
                                     ${statusIcon} ${statusText}
                                 </span>