[dyad] Improved image analysis UI layout - wrote 1 file(s)

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>
+        <div className="flex items-center gap-2">
-          {missingAltCount > 0 ? (
+          <Label htmlFor="sort-order" className="text-sm flex-shrink-0">
-            <p className="text-sm font-medium text-destructive">
+            Sort by:
-              <span className="font-bold">{missingAltCount}</span> of{" "}
+          </Label>
-              {images.length} images are missing alt text.
+          <Select
-            </p>
+            value={sortOrder}
-          ) : (
+            onValueChange={(value) =>
-            <p className="text-sm font-medium text-green-600">
+              setSortOrder(value as "default" | "asc" | "desc")
-              Great! All {images.length} images have alt text.
+            }
-            </p>
+          >
-          )}
+            <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">