SDK: Fix Embed widget container size

Author: MananTank

.changeset/social-showers-see.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix Embed container size

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"

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>
   );
 }

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"
+    />
   );
 }

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}

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,
   };
 });

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 (