[dyad] Centered image analysis summary text - wrote 1 file(s)

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 className="flex items-center space-x-2">
-          <div>
+          <Checkbox
-            {missingAltCount > 0 ? (
+            id="missing-alt"
-              <p className="text-sm font-medium text-destructive">
+            checked={showMissingOnly}
-                <span className="font-bold">{missingAltCount}</span> of{" "}
+            onCheckedChange={(checked) => setShowMissingOnly(!!checked)}
-                {images.length} images are missing alt text.
+          />
-              </p>
+          <Label htmlFor="missing-alt">Show only missing alt text</Label>
-            ) : (
+        </div>
-              <p className="text-sm font-medium text-green-600">
+        <div className="text-center">
-                Great! All {images.length} images have alt text.
+          {missingAltCount > 0 ? (
-              </p>
+            <p className="text-sm font-medium text-destructive">
-            )}
+              <span className="font-bold">{missingAltCount}</span> of{" "}
-          </div>
+              {images.length} images are missing alt text.
-          <div className="flex items-center space-x-2">
+            </p>
-            <Checkbox
+          ) : (
-              id="missing-alt"
+            <p className="text-sm font-medium text-green-600">
-              checked={showMissingOnly}
+              Great! All {images.length} images have alt text.
-              onCheckedChange={(checked) => setShowMissingOnly(!!checked)}
+            </p>
-            />
+          )}
-            <Label htmlFor="missing-alt">Show only missing alt text</Label>
-          </div>
         </div>
         <TooltipProvider>
           <Tooltip>