From 1b796ad5b372dbcb8ac8961c9fad472954e55aca Mon Sep 17 00:00:00 2001
From: Lincoln Stein <lincoln.stein@gmail.com>
Date: Mon, 20 Apr 2026 21:05:14 -0400
Subject: [PATCH] fix(ui): give ref image wrapper explicit aspect ratio for iOS
 WebKit

iOS WebKit collapses a flex item to zero width when the width is only
implied by a child's aspect ratio. Set aspectRatio on the wrapper Box
directly so the thumbnail tile sizes correctly on iPad Chrome/Safari.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/RefImage/RefImagePreview.tsx           | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx
index 8dbab1ce36..e972f59295 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx
@@ -116,6 +116,7 @@ export const RefImagePreview = memo(() => {
         ref={dndRef}
         position="relative"
         h="full"
+        aspectRatio="1/1"
         flexShrink={0}
         opacity={isDragging ? 0.3 : 1}
         data-ref-image-id={id}
@@ -143,7 +144,15 @@ export const RefImagePreview = memo(() => {
     );
   }
   return (
-    <Box ref={dndRef} position="relative" h="full" flexShrink={0} opacity={isDragging ? 0.3 : 1} data-ref-image-id={id}>
+    <Box
+      ref={dndRef}
+      position="relative"
+      h="full"
+      aspectRatio="1/1"
+      flexShrink={0}
+      opacity={isDragging ? 0.3 : 1}
+      data-ref-image-id={id}
+    >
       <Tooltip label={warnings.length > 0 ? <RefImageWarningTooltipContent warnings={warnings} /> : undefined}>
         <Flex
           position="relative"