fix: fix styles for mobile

lifinance · Jul 6, 2022 · c3930ca · c3930ca
1 parent ff4f2a6
commit c3930ca
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx
@@ -20,10 +20,13 @@ const CssBaselineContainer = styled(ScopedCssBaseline)(({ theme }) => ({
 
 const RelativeContainer = styled(Box)(({ theme }) => ({
   position: 'relative',
-  width: 392,
+  width: '100%',
+  minWidth: 375,
+  maxWidth: 392,
   background: theme.palette.background.default,
   overflow: 'auto',
   flex: 1,
+  boxSizing: 'content-box',
 }));
 
 const ScrollableContainer = styled(Box)({

diff --git a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx b/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx
@@ -23,14 +23,14 @@ export const SelectTokenCardHeader = styled(CardHeader, {
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      width: compact ? 92 : 244,
+      width: compact ? 92 : 224,
       fontWeight: selected ? 500 : 400,
     },
     [`.${cardHeaderClasses.subheader}`]: {
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      width: compact ? 92 : 244,
+      width: compact ? 92 : 224,
     },
   }),
 );