From 3b7aa97f65bc4b0f5a4f51e23cba89b3eb712572 Mon Sep 17 00:00:00 2001
From: ankit-thesys <i-ankit@thesys.dev>
Date: Mon, 9 Mar 2026 17:23:39 +0530
Subject: [PATCH] image block was rendering in a loop because of styling issue.
 add fail safe on useResponsiveContainer and fixing style  of the image block
 to fix height made the render loop stop on react renderer

---
 packages/react-ui/src/components/ImageBlock/imageBlock.scss | 6 +++++-
 packages/react-ui/src/hooks/useResponsiveContainer.ts       | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/react-ui/src/components/ImageBlock/imageBlock.scss b/packages/react-ui/src/components/ImageBlock/imageBlock.scss
index f7e7e34e1..41a4a846a 100644
--- a/packages/react-ui/src/components/ImageBlock/imageBlock.scss
+++ b/packages/react-ui/src/components/ImageBlock/imageBlock.scss
@@ -1,7 +1,10 @@
 @use "../../cssUtils.scss" as cssUtils;
 
 .openui-image-block-wrapper {
-  height: 240px;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 240px;
+  max-height: 240px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -38,6 +41,7 @@
 
 .openui-image-block-image {
   height: 100%;
+  max-width: 100%;
   object-fit: cover;
   border: 4px solid cssUtils.$border-default;
   border-radius: cssUtils.$radius-l;
diff --git a/packages/react-ui/src/hooks/useResponsiveContainer.ts b/packages/react-ui/src/hooks/useResponsiveContainer.ts
index 0bbe688eb..c579d6446 100644
--- a/packages/react-ui/src/hooks/useResponsiveContainer.ts
+++ b/packages/react-ui/src/hooks/useResponsiveContainer.ts
@@ -45,7 +45,10 @@ export function useResponsiveContainer(containerRef: RefObject<HTMLElement | nul
     const updateSize = () => {
       const width = element.clientWidth;
       const height = element.clientHeight;
-      setSize({ width, height, breakpoint: getBreakpoint(width) });
+      setSize((prev) => {
+        if (prev.width === width && prev.height === height) return prev;
+        return { width, height, breakpoint: getBreakpoint(width) };
+      });
     };
 
     const rafUpdateSize = () => requestAnimationFrame(updateSize);