rango-exchange · Ikari-Shinji-re · Oct 26, 2025
diff --git a/examples/iframe/modal.html b/examples/iframe/modal.html
@@ -14,7 +14,7 @@
         position: fixed;
         top: 0;
         left: 0;
-        content: '';
+        content: "";
       }
       .modal {
         position: fixed;
@@ -83,21 +83,21 @@
     <div class="modal">
       <div id="rango-widget-container"></div>
     </div>
-    <script src="../../widget/iframe/dist/index.js"></script>
+    <script src="https://api.rango.exchange/widget/iframe.bundle.min.js"></script>
     <script defer type="text/javascript">
       const config = {
         from: {
-          blockchain: 'ETH',
+          blockchain: "ETH",
         },
         amount: 1,
         // This API key is only for test purpose. Don't use it in production.
-        apiKey: 'c6381a79-2817-4602-83bf-6a641a409e32',
+        apiKey: "c6381a79-2817-4602-83bf-6a641a409e32",
         // This project id is only for test purpose. Don't use it in production.
         // Get your Wallet Connect project id from https://cloud.walletconnect.com/
-        walletConnectProjectId: 'e24844c5deb5193c1c14840a7af6a40b',
+        walletConnectProjectId: "e24844c5deb5193c1c14840a7af6a40b",
       };
 
-      rangoWidget.init(config, { widgetUrl: 'http://localhost:3002' });
+      rangoWidget.init(config);
     </script>
   </body>
 </html>
diff --git a/examples/iframe/modal_dynamic.html b/examples/iframe/modal_dynamic.html
@@ -14,7 +14,7 @@
         position: fixed;
         top: 0;
         left: 0;
-        content: '';
+        content: "";
       }
       .modal {
         position: fixed;
@@ -82,27 +82,21 @@
     <div class="modal">
       <div id="rango-widget-container"></div>
     </div>
-    <script src="../../widget/iframe/dist/index.js"></script>
+    <script src="https://api.rango.exchange/widget/iframe.bundle.min.js"></script>
     <script defer type="text/javascript">
       const config = {
         from: {
-          blockchain: 'ETH',
+          blockchain: "ETH",
         },
         amount: 1,
         // This API key is only for test purpose. Don't use it in production.
-        apiKey: 'c6381a79-2817-4602-83bf-6a641a409e32',
+        apiKey: "c6381a79-2817-4602-83bf-6a641a409e32",
         // This project id is only for test purpose. Don't use it in production.
         // Get your Wallet Connect project id from https://cloud.walletconnect.com/
-        walletConnectProjectId: 'e24844c5deb5193c1c14840a7af6a40b',
+        walletConnectProjectId: "e24844c5deb5193c1c14840a7af6a40b",
       };
 
-      rangoWidget
-        .init(config, {
-          clientUrl: 'http://localhost:5500',
-          widgetUrl: 'http://localhost:3002',
-          rootId: 'rango-widget-container',
-        })
-        .activate('dynamicHeight');
+      rangoWidget.init(config);
     </script>
   </body>
 </html>
diff --git a/widget/app/public/index.css b/widget/app/public/index.css
@@ -2,18 +2,16 @@
 
 html {
   box-sizing: border-box;
-  height: 100%;
 }
 
 body {
   padding: 0;
   margin: 0;
   background-color: transparent;
-  height: 100%;
 }
 
 #app {
-  height: 100%;
+  min-height: 100vh;
   display: flex;
   justify-content: center;
 }
diff --git a/widget/embedded/src/components/Layout/Layout.constants.ts b/widget/embedded/src/components/Layout/Layout.constants.ts
@@ -1,5 +1,3 @@
-export const WIDGET_MAX_HEIGHT = '700px';
-export const WIDGET_MIN_HEIGHT_FOR_SMALL_SCREENS = '425px';
-export const WIDGET_MIN_HEIGHT_FOR_LARGE_SCREENS = '550px';
-export const COMPACT_TOKEN_SELECTOR_THRESHOLD = '640px';
-export const LARGE_SCREEN_MIN_HEIGHT = '800px';
+export const WIDGET_MAX_HEIGHT = 700;
+export const WIDGET_MIN_HEIGHT = 425;
+export const COMPACT_TOKEN_SELECTOR_THRESHOLD = 640;
diff --git a/widget/embedded/src/components/Layout/Layout.styles.ts b/widget/embedded/src/components/Layout/Layout.styles.ts
@@ -1,11 +1,6 @@
 import { css, styled } from '@rango-dev/ui';
 
-import {
-  LARGE_SCREEN_MIN_HEIGHT,
-  WIDGET_MAX_HEIGHT,
-  WIDGET_MIN_HEIGHT_FOR_LARGE_SCREENS,
-  WIDGET_MIN_HEIGHT_FOR_SMALL_SCREENS,
-} from './Layout.constants';
+import { WIDGET_MAX_HEIGHT, WIDGET_MIN_HEIGHT } from './Layout.constants';
 
 export const LayoutContainer = css({
   borderRadius: '$primary',
@@ -21,18 +16,16 @@ export const Container = styled('div', {
   minWidth: '300px',
   maxWidth: '390px',
   backgroundColor: '$background',
-  maxHeight: WIDGET_MAX_HEIGHT,
   variants: {
     height: {
       auto: {
         height: 'auto',
+        maxHeight: WIDGET_MAX_HEIGHT,
       },
       fixed: {
-        height: '100%',
-        minHeight: WIDGET_MIN_HEIGHT_FOR_SMALL_SCREENS,
-        [`@media screen and (min-height: ${LARGE_SCREEN_MIN_HEIGHT})`]: {
-          minHeight: WIDGET_MIN_HEIGHT_FOR_LARGE_SCREENS,
-        },
+        minHeight: WIDGET_MIN_HEIGHT,
+        maxHeight: WIDGET_MAX_HEIGHT,
+        height: WIDGET_MAX_HEIGHT,
       },
     },
     showBanner: {

diff --git a/widget/embedded/src/components/Layout/Layout.tsx b/widget/embedded/src/components/Layout/Layout.tsx
@@ -10,6 +10,7 @@ import { WIDGET_UI_ID } from '../../constants';
 import { useIframe } from '../../hooks/useIframe';
 import { isAppLoadedIntoIframe } from '../../hooks/useIframe/useIframe.helpers';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
+import useScreenDetect from '../../hooks/useScreenDetect';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
 import { tabManager, useUiStore } from '../../store/ui';
@@ -21,7 +22,10 @@ import { ActivateTabModal } from '../common/ActivateTabModal';
 import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
 import { RefreshModal } from '../RefreshModal';
 
-import { COMPACT_TOKEN_SELECTOR_THRESHOLD } from './Layout.constants';
+import {
+  COMPACT_TOKEN_SELECTOR_THRESHOLD,
+  WIDGET_MAX_HEIGHT,
+} from './Layout.constants';
 import { onScrollContentAttachStatusToContainer } from './Layout.helpers';
 import {
   BannerContainer,
@@ -43,7 +47,7 @@ function Layout(props: PropsWithChildren<PropTypes>) {
   const {
     config: { features, theme },
   } = useAppStore();
-  const { watermark } = useUiStore();
+  const { watermark, setShowCompactTokenSelector } = useUiStore();
 
   const hasWatermark = watermark === 'FULL';
   const { activeTheme } = useTheme(theme || {});
@@ -60,10 +64,10 @@ function Layout(props: PropsWithChildren<PropTypes>) {
     showActivateTabModal,
     setShowActivateTabModal,
     activateCurrentTab,
-    setShowCompactTokenSelector,
   } = useUiStore();
   const navigateBack = useNavigateBack();
   const { manager } = useManager();
+  const { isTablet, isMobile } = useScreenDetect();
   const pendingSwaps: PendingSwap[] = getPendingSwaps(manager).map(
     ({ swap }) => swap
   );
@@ -130,25 +134,35 @@ function Layout(props: PropsWithChildren<PropTypes>) {
   }, [fetchStatus]);
 
   useLayoutEffect(() => {
-    if (!containerRef.current) {
-      return;
-    }
+    const isFixedHeight =
+      height === 'auto' || !containerRef.current || isAppLoadedIntoIframe();
+    const isSmallScreen = isMobile || isTablet;
 
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.contentRect) {
-          setShowCompactTokenSelector(
-            entry.contentRect.height <
-              parseInt(COMPACT_TOKEN_SELECTOR_THRESHOLD)
-          );
-        }
+    const handler = () => {
+      if (isFixedHeight) {
+        return;
       }
-    });
 
-    observer.observe(containerRef.current);
+      if (isSmallScreen) {
+        containerRef.current.style.height = `${
+          window.innerHeight - containerRef.current.offsetTop
+        }px`;
+      } else {
+        containerRef.current.style.height = `${WIDGET_MAX_HEIGHT}px`;
+      }
 
-    return () => observer.disconnect();
-  }, []);
+      setShowCompactTokenSelector(
+        parseFloat(containerRef.current.style.height) <
+          COMPACT_TOKEN_SELECTOR_THRESHOLD
+      );
+    };
+
+    handler();
+
+    window.addEventListener('resize', handler);
+
+    return () => window.removeEventListener('resize', handler);
+  }, [height, isMobile, isTablet]);
 
   return (
     <Container

diff --git a/widget/embedded/src/containers/App/App.styles.ts b/widget/embedded/src/containers/App/App.styles.ts
@@ -4,7 +4,6 @@ export const MainContainer = styled('div', {
   fontFamily: '$widget',
   boxSizing: 'border-box',
   textAlign: 'left',
-  height: '100%',
   '& *, *::before, *::after': {
     boxSizing: 'inherit',
   },

diff --git a/widget/embedded/src/hooks/useScreenDetect.ts b/widget/embedded/src/hooks/useScreenDetect.ts
@@ -43,13 +43,7 @@ const useScreenDetect = () => {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  return {
-    isMobile,
-    isTablet,
-    isNotebook,
-    isLargeScreen,
-    isExtraLargeScreen,
-  };
+  return { isMobile, isTablet, isNotebook, isLargeScreen, isExtraLargeScreen };
 };
 
 export default useScreenDetect;
@@ -27,7 +27,6 @@ interface Features {
  * esm supports for `exports` in package json which will be useful for this use case.
  * The bellow type should come from `widget/embedded/src/hooks/useIframe/useIframe.types.ts`.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Messages = any;
 
 export class RangoWidget {