github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): give ref image wrapper explicit aspect ratio for iOS WebKit

Browse Source 
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>
This commit is contained in:
Lincoln Stein
2026-04-20 21:05:14 -04:00
parent 62ae599cef
commit 1b796ad5b3
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx
View File

@@ -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"