feat: make widget to use all space (#4197)

* feat: make widget wider * chore: use max width in container * feat: add padding when drawer is open
cowprotocol · Apr 10, 2024 · 3ab6cb9 · 3ab6cb9
1 parent 1623b37
commit 3ab6cb9
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 3 deletions.
diff --git a/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts b/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts
@@ -47,7 +47,7 @@ export function useWidgetParams(configuratorState: ConfiguratorState): CowSwapWi
 
     const params: CowSwapWidgetParams = {
       appCode: 'CoW Widget: Configurator',
-      width: '450px',
+      width: '100%',
       height: '640px',
       chainId,
       tokenLists: tokenListUrls.filter((list) => list.enabled).map((list) => list.url),

diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx
@@ -300,7 +300,7 @@ export function Configurator({ title }: { title: string }) {
         </List>
       </Drawer>
 
-      <Box sx={ContentStyled}>
+      <Box sx={{ ...ContentStyled, pl: isDrawerOpen ? '300px' : 0 }}>
         {params && (
           <>
             <EmbedDialog

diff --git a/apps/widget-configurator/src/app/configurator/styled.ts b/apps/widget-configurator/src/app/configurator/styled.ts
@@ -21,6 +21,7 @@ export const DrawerStyled = (theme: Theme) => ({
 })
 
 export const ContentStyled = {
+  width: '100%',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',

diff --git a/libs/widget-react/src/lib/CowSwapWidget.tsx b/libs/widget-react/src/lib/CowSwapWidget.tsx
@@ -98,5 +98,5 @@ export function CowSwapWidget(props: CowSwapWidgetProps) {
     )
   }
 
-  return <div ref={containerRef}></div>
+  return <div ref={containerRef} style={{ width: '100%' }}></div>
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -98,5 +98,5 @@ export function CowSwapWidget(props: CowSwapWidgetProps) { @@
         )
       }
-      return <div ref={containerRef}></div>
+      return <div ref={containerRef} style={{ width: '100%' }}></div>
     }