From b888413ca68235f8cda4757607a6cff037f554aa Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 26 Sep 2025 16:56:25 +0000
Subject: [PATCH] Dashboard: Fix BuyAndSwapWidget width (#8134)
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 making minor adjustments to the layout and styling of components in the dashboard, specifically in `grid-pattern-embed-container.tsx` and `BuyAndSwapEmbed.tsx`.

### Detailed summary
- In `grid-pattern-embed-container.tsx`, the width class `sm:w-[420px]` was removed from the `div`, allowing it to take its natural width.
- In `BuyAndSwapEmbed.tsx`, the width class `!w-full` was removed from two instances of `SwapWidget`, maintaining the rounded border style but removing the full width constraint.

> ✨ 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

* Style
  * Buy and Swap widgets no longer force full-width, adapting to their container while preserving rounded, borderless styling.
  * Embed container relaxes small-screen width limits, allowing content to use available space more naturally.
  * Improves responsiveness, spacing, and alignment across devices, reducing unnecessary whitespace and preventing overstretched layouts.
  * Visual update only; no changes to widget behavior or controls.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx    | 4 ++--
 .../src/@/components/blocks/grid-pattern-embed-container.tsx  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx b/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
index 5bbb3473fa9..af61737726e 100644
--- a/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
+++ b/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
@@ -85,7 +85,7 @@ export function BuyAndSwapEmbed(props: {
         <BuyWidget
           amount={props.buyAmount || "1"}
           chain={props.chain}
-          className="!rounded-2xl !w-full !border-none"
+          className="!rounded-2xl !border-none"
           title=""
           client={client}
           connectOptions={{
@@ -179,7 +179,7 @@ export function BuyAndSwapEmbed(props: {
         <SwapWidget
           client={client}
           theme={themeObj}
-          className="!rounded-2xl !border-none !w-full"
+          className="!rounded-2xl !border-none"
           prefill={{
             // buy this token by default
             buyToken: {
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 284d5849cae..760600a109d 100644
--- a/apps/dashboard/src/@/components/blocks/grid-pattern-embed-container.tsx
+++ b/apps/dashboard/src/@/components/blocks/grid-pattern-embed-container.tsx
@@ -17,7 +17,7 @@ export function GridPatternEmbedContainer(props: {
             "linear-gradient(to bottom right,white,transparent,transparent)",
         }}
       />
-      <div className="sm:w-[420px] z-10">{props.children}</div>
+      <div className="z-10">{props.children}</div>
     </div>
   );
 }