From aa0d23e966d4fd34ebadc38793f0f006aa70004f Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 26 Sep 2025 20:10:28 +0000
Subject: [PATCH] SDK: Fix Embed widget container size, Dashboard: Fix Bridge
 embed UI width (#8136)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on fixing the embed container size across various components in the `thirdweb` and `dashboard` applications, ensuring better layout and responsiveness.

### Detailed summary
- Updated `maxWidth` in `ConnectEmbed` to `100%` and adjusted `width` based on `modalSize`.
- Removed redundant `layout: "centered"` parameter in `ConnectEmbed` story.
- Simplified `UniversalBridgeEmbed` structure by removing unnecessary wrapping `div`.
- Added `min-w-0` class to `BuyAndSwapEmbed` and `GridPatternEmbedContainer` for better responsiveness.
- Adjusted layout classes in `GridPatternEmbedContainer` for improved alignment.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- Bug Fixes
  - Fixed embed container sizing in the Connect Wallet modal to respect modal width and prevent viewport overflow.
  - Resolved overflow and min-width issues in embed containers for smoother responsive behavior.

- Style
  - Updated Bridge page layout to display components side-by-side on larger screens.
  - Improved responsive rounding and overflow handling around embed containers for cleaner visuals.

- Chores
  - Updated thirdweb dependency to the latest patch release.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .changeset/social-showers-see.md                   |  5 +++++
 .../src/@/components/blocks/BuyAndSwapEmbed.tsx    |  2 +-
 .../blocks/grid-pattern-embed-container.tsx        |  4 ++--
 .../components/client/UniversalBridgeEmbed.tsx     | 14 ++++++--------
 apps/dashboard/src/app/bridge/page.tsx             |  2 +-
 .../web/ui/ConnectWallet/Modal/ConnectEmbed.tsx    |  5 ++---
 .../thirdweb/src/stories/ConnectEmbed.stories.tsx  |  3 ---
 7 files changed, 17 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/social-showers-see.md

diff --git a/.changeset/social-showers-see.md b/.changeset/social-showers-see.md
new file mode 100644
index 00000000000..28e2cdb3dd4
--- /dev/null
+++ b/.changeset/social-showers-see.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix Embed container size
diff --git a/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx b/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
index af61737726e..0a9bdaaa705 100644
--- a/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
+++ b/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
@@ -67,7 +67,7 @@ export function BuyAndSwapEmbed(props: {
   }, [props.pageType]);
 
   return (
-    <div className="bg-card rounded-2xl border overflow-hidden flex flex-col relative z-10 shadow-xl">
+    <div className="bg-card rounded-2xl border overflow-hidden flex flex-col relative z-10 shadow-xl min-w-0">
       <div className="flex gap-2.5 p-4 border-b border-dashed">
         <TabButton
           label="Swap"
diff --git a/apps/dashboard/src/@/components/blocks/grid-pattern-embed-container.tsx b/apps/dashboard/src/@/components/blocks/grid-pattern-embed-container.tsx
index 760600a109d..bae0ec0865e 100644
--- a/apps/dashboard/src/@/components/blocks/grid-pattern-embed-container.tsx
+++ b/apps/dashboard/src/@/components/blocks/grid-pattern-embed-container.tsx
@@ -4,7 +4,7 @@ export function GridPatternEmbedContainer(props: {
   children: React.ReactNode;
 }) {
   return (
-    <div className="sm:flex sm:justify-center w-full sm:border sm:border-dashed sm:bg-accent/20 sm:py-12 rounded-xl overflow-hidden relative">
+    <div className="flex justify-center w-full sm:border sm:border-dashed sm:bg-accent/20 sm:py-12 sm:rounded-xl sm:overflow-hidden relative">
       <GridPattern
         width={30}
         height={30}
@@ -17,7 +17,7 @@ export function GridPatternEmbedContainer(props: {
             "linear-gradient(to bottom right,white,transparent,transparent)",
         }}
       />
-      <div className="z-10">{props.children}</div>
+      <div className="z-10 min-w-0">{props.children}</div>
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx b/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx
index dfddd41f669..9e4aa425588 100644
--- a/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx
+++ b/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx
@@ -16,13 +16,11 @@ export function UniversalBridgeEmbed({
   const chain = useV5DashboardChain(chainId || 1);
 
   return (
-    <div className="w-full lg:w-[400px]">
-      <BuyAndSwapEmbed
-        chain={chain}
-        buyAmount={amount}
-        tokenAddress={token?.address}
-        pageType="bridge"
-      />
-    </div>
+    <BuyAndSwapEmbed
+      chain={chain}
+      buyAmount={amount}
+      tokenAddress={token?.address}
+      pageType="bridge"
+    />
   );
 }
diff --git a/apps/dashboard/src/app/bridge/page.tsx b/apps/dashboard/src/app/bridge/page.tsx
index a6474efda9a..b59ebbaa298 100644
--- a/apps/dashboard/src/app/bridge/page.tsx
+++ b/apps/dashboard/src/app/bridge/page.tsx
@@ -54,7 +54,7 @@ export default async function BridgePage({
     <div className="grow flex flex-col relative overflow-hidden">
       <PageHeader />
 
-      <div className="flex grow flex-col items-center justify-center py-36 px-4 min-h-dvh relative overflow-hidden">
+      <div className="flex grow items-center justify-center py-36 px-4 min-h-dvh relative overflow-hidden">
         <DotsBackgroundPattern />
         <UniversalBridgeEmbed
           amount={amount as string}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
index 897d39a1425..140ebcfcfda 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
@@ -479,8 +479,7 @@ export const EmbedContainer = /* @__PURE__ */ StyledDiv<{
     lineHeight: "normal",
     overflow: "hidden",
     position: "relative",
-    width: "100vw",
-    maxWidth:
-      modalSize === "compact" ? modalMaxWidthCompact : modalMaxWidthWide,
+    maxWidth: "100%",
+    width: modalSize === "compact" ? modalMaxWidthCompact : modalMaxWidthWide,
   };
 });
diff --git a/packages/thirdweb/src/stories/ConnectEmbed.stories.tsx b/packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
index 536d05f925b..1abe85531a8 100644
--- a/packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
+++ b/packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
@@ -7,9 +7,6 @@ import { storyClient } from "./utils.js";
 
 const meta: Meta<typeof ConnectEmbed> = {
   title: "Connect/ConnectEmbed",
-  parameters: {
-    layout: "centered",
-  },
   decorators: [
     (Story) => {
       return (