fix: allow lower mobile view min-width

lifinance · Oct 19, 2023 · 6d05d54 · 6d05d54
1 parent a0ae0ca
commit 6d05d54
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/packages/widget/src/AppDrawer.tsx b/packages/widget/src/AppDrawer.tsx
@@ -102,7 +102,7 @@ export const AppDrawer = forwardRef<WidgetDrawer, WidgetProps>(
           PaperProps={{
             sx: {
               width: config?.containerStyle?.width ?? '100%',
-              minWidth: config?.containerStyle?.minWidth ?? 375,
+              minWidth: config?.containerStyle?.minWidth ?? 360,
               maxWidth: config?.containerStyle?.maxWidth ?? 392,
             },
           }}

diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx
@@ -23,7 +23,7 @@ const RelativeContainer = styled(Box, {
   position: 'relative',
   boxSizing: 'content-box',
   width: '100%',
-  minWidth: 375,
+  minWidth: 360,
   maxWidth: 392,
   maxHeight: variant === 'drawer' ? 'none' : maxHeight,
   background: theme.palette.background.default,

diff --git a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx b/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx
@@ -15,15 +15,21 @@ export const SelectTokenCardHeader = styled(CardHeader, {
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      width: compact ? (selected ? 92 : 142) : 256,
+      width: compact ? 92 : 256,
       fontWeight: selected ? 500 : 400,
       fontSize: compact && !selected ? '1rem' : '1.125rem',
+      [theme.breakpoints.down(392)]: {
+        width: compact ? 92 : 224,
+      },
     },
     [`.${cardHeaderClasses.subheader}`]: {
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       width: compact ? 92 : 256,
+      [theme.breakpoints.down(392)]: {
+        width: compact ? 92 : 224,
+      },
     },
   }),
 );