From 0bd13a5f7b889a581bb42aac742b3065b765866a Mon Sep 17 00:00:00 2001
From: "m.ray" <16125548+MadalinaRaicu@users.noreply.github.com>
Date: Thu, 25 Jan 2024 15:32:14 +0200
Subject: [PATCH] fix(trading): adjust full screen for mobile dialogs (#5666)

---
 libs/accounts/src/lib/breakdown-table.tsx        | 2 +-
 libs/ui-toolkit/src/components/dialog/dialog.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/libs/accounts/src/lib/breakdown-table.tsx b/libs/accounts/src/lib/breakdown-table.tsx
index 1f77fd896..f7212c0d4 100644
--- a/libs/accounts/src/lib/breakdown-table.tsx
+++ b/libs/accounts/src/lib/breakdown-table.tsx
@@ -38,7 +38,7 @@ const BreakdownTable = forwardRef<AgGridReact, BreakdownTableProps>(
         {
           headerName: t('Market'),
           field: 'market.tradableInstrument.instrument.code',
-          width: 90,
+          maxWidth: 150,
           pinned: true,
           sort: 'desc',
           cellRenderer: ({
diff --git a/libs/ui-toolkit/src/components/dialog/dialog.tsx b/libs/ui-toolkit/src/components/dialog/dialog.tsx
index 5f3cfc960..26836c54e 100644
--- a/libs/ui-toolkit/src/components/dialog/dialog.tsx
+++ b/libs/ui-toolkit/src/components/dialog/dialog.tsx
@@ -38,14 +38,14 @@ export function Dialog({
   );
   const wrapperClasses = classNames(
     // Dimensions
-    'max-w-[90vw] p-4 md:p-8',
+    'w-screen sm:max-w-[90vw] p-4 md:p-8',
     // Need to apply background and text colors again as content is rendered in a portal
     'dark:bg-black bg-white dark:text-white',
     getIntentBorder(intent),
     {
-      'w-[520px]': size === 'small',
-      'w-[680px]': size === 'medium',
-      'w-[720px] lg:w-[940px]': size === 'large',
+      'sm:w-[520px]': size === 'small',
+      'sm:w-[680px]': size === 'medium',
+      'sm:w-[720px] lg:w-[940px]': size === 'large',
     }
   );