From e076898798af25fe363cd5de4ae8cd64e989c28d Mon Sep 17 00:00:00 2001
From: Rohinish <singhrohinish09@gmail.com>
Date: Tue, 20 Feb 2024 13:00:08 +0530
Subject: [PATCH] fix(ui): logic to remove badge for small image size

---
 .../gallery/components/ImageGrid/GalleryImage.tsx      | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
index 8bdcc1c55d..866b3013f2 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
@@ -122,7 +122,10 @@ const GalleryImage = (props: HoverableImageProps) => {
   }
 
   return (
-    <Box w="full" h="full" className="gallerygrid-image" data-testid={dataTestId}>
+    <Box w="full" h="full" className="gallerygrid-image" data-testid={dataTestId}
+      sx={{
+        containerType: "inline-size",
+      }}>
       <Flex
         ref={imageContainerRef}
         userSelect="none"
@@ -153,6 +156,11 @@ const GalleryImage = (props: HoverableImageProps) => {
             bottom={0}
             right={0}
             px={2}
+            sx={{
+              "@container (max-width: 80px)": {
+                "&": { display: "none" },
+              },
+            }}
           >{`${imageDTO.width}x${imageDTO.height}`}</Text>
           <>
             <IAIDndImageIcon onClick={toggleStarredState} icon={starIcon} tooltip={starTooltip} />