From 41f8c0e5a19a13e46b08e80a4a415590dd6aaffe Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Tue, 20 Jan 2026 14:29:52 +0100
Subject: [PATCH] [dyad] Centered image analysis summary text - wrote 1 file(s)

---
 src/components/image-alt-display.tsx | 40 +++++++++++++---------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/components/image-alt-display.tsx b/src/components/image-alt-display.tsx
index 440fd2f..5caae37 100644
--- a/src/components/image-alt-display.tsx
+++ b/src/components/image-alt-display.tsx
@@ -77,27 +77,25 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
   return (
     <div className="space-y-4">
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-muted/50 rounded-lg">
-        <div className="flex flex-col sm:flex-row sm:items-center gap-4">
-          <div>
-            {missingAltCount > 0 ? (
-              <p className="text-sm font-medium text-destructive">
-                <span className="font-bold">{missingAltCount}</span> of{" "}
-                {images.length} images are missing alt text.
-              </p>
-            ) : (
-              <p className="text-sm font-medium text-green-600">
-                Great! All {images.length} images have alt text.
-              </p>
-            )}
-          </div>
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="missing-alt"
-              checked={showMissingOnly}
-              onCheckedChange={(checked) => setShowMissingOnly(!!checked)}
-            />
-            <Label htmlFor="missing-alt">Show only missing alt text</Label>
-          </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="missing-alt"
+            checked={showMissingOnly}
+            onCheckedChange={(checked) => setShowMissingOnly(!!checked)}
+          />
+          <Label htmlFor="missing-alt">Show only missing alt text</Label>
+        </div>
+        <div className="text-center">
+          {missingAltCount > 0 ? (
+            <p className="text-sm font-medium text-destructive">
+              <span className="font-bold">{missingAltCount}</span> of{" "}
+              {images.length} images are missing alt text.
+            </p>
+          ) : (
+            <p className="text-sm font-medium text-green-600">
+              Great! All {images.length} images have alt text.
+            </p>
+          )}
         </div>
         <TooltipProvider>
           <Tooltip>