From 53ff7d830136b6ac652ee0cdba6523e366990e3c Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Tue, 20 Jan 2026 14:27:20 +0100
Subject: [PATCH] [dyad] Improved image analysis UI layout - wrote 1 file(s)

---
 src/components/image-alt-display.tsx | 62 ++++++++++++++--------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/components/image-alt-display.tsx b/src/components/image-alt-display.tsx
index e880f66..0b166a8 100644
--- a/src/components/image-alt-display.tsx
+++ b/src/components/image-alt-display.tsx
@@ -66,6 +66,18 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
     <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"
@@ -74,38 +86,26 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
             />
             <Label htmlFor="missing-alt">Show only missing alt text</Label>
           </div>
-          <div className="flex items-center gap-2">
-            <Label htmlFor="sort-order" className="text-sm flex-shrink-0">
-              Sort by:
-            </Label>
-            <Select
-              value={sortOrder}
-              onValueChange={(value) =>
-                setSortOrder(value as "default" | "asc" | "desc")
-              }
-            >
-              <SelectTrigger className="w-full sm:w-[240px]" id="sort-order">
-                <SelectValue placeholder="Select sort order" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="default">Default Order</SelectItem>
-                <SelectItem value="desc">Size (Largest to Smallest)</SelectItem>
-                <SelectItem value="asc">Size (Smallest to Largest)</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
         </div>
-        <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 className="flex items-center gap-2">
+          <Label htmlFor="sort-order" className="text-sm flex-shrink-0">
+            Sort by:
+          </Label>
+          <Select
+            value={sortOrder}
+            onValueChange={(value) =>
+              setSortOrder(value as "default" | "asc" | "desc")
+            }
+          >
+            <SelectTrigger className="w-full sm:w-[240px]" id="sort-order">
+              <SelectValue placeholder="Select sort order" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="default">Default Order</SelectItem>
+              <SelectItem value="desc">Size (Largest to Smallest)</SelectItem>
+              <SelectItem value="asc">Size (Smallest to Largest)</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
       </div>
       <div className="space-y-4">