fix: disable expandable variant on small devices

packages/widget/src/App.tsx

@@ -10,7 +10,7 @@ import { Header } from './components/Header';
 import { Initializer } from './components/Initializer';
 import { PoweredBy } from './components/PoweredBy';
 import { SwapRoutesExpanded } from './components/SwapRoutes';
-import { useWidgetConfig } from './providers';
+import { useExpandableVariant } from './hooks';
 
 export const App: React.FC<AppProps> = ({ config }) => {
   return (
@@ -21,7 +21,7 @@ export const App: React.FC<AppProps> = ({ config }) => {
 };
 
 export const AppDefault = () => {
-  const { variant } = useWidgetConfig();
+  const expandable = useExpandableVariant();
   return (
     <AppExpandedContainer>
       <AppContainer>
@@ -32,7 +32,7 @@ export const AppDefault = () => {
         <PoweredBy />
         <Initializer />
       </AppContainer>
-      {variant === 'expandable' ? <SwapRoutesExpanded /> : null}
+      {expandable ? <SwapRoutesExpanded /> : null}
     </AppExpandedContainer>
   );
 };

packages/widget/src/components/AppContainer.tsx

@@ -7,7 +7,7 @@ import { ElementId } from '../utils';
 
 export const maxHeight = 680;
 
-const ExpandedContainer = styled(Box, {
+export const AppExpandedContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: WidgetVariant }>(({ variant }) => ({
   display: 'flex',
@@ -70,12 +70,6 @@ export const AppContainer: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   );
 };
 
-export const AppExpandedContainer: React.FC<PropsWithChildren<{}>> = ({
-  children,
-}) => {
-  return <ExpandedContainer>{children}</ExpandedContainer>;
-};
-
 // export const ScrollToLocation: React.FC<{
 //   elementRef: RefObject<HTMLElement>;
 // }> = ({ elementRef }) => {

packages/widget/src/hooks/index.ts

@@ -2,6 +2,7 @@ export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
+export * from './useExpandableVariant';
 export * from './useFeaturedTokens';
 export * from './useGasSufficiency';
 export * from './useInitializer';

packages/widget/src/hooks/useExpandableVariant.ts

@@ -0,0 +1,13 @@
+import type { Theme } from '@mui/material';
+import { useMediaQuery } from '@mui/material';
+import { useWidgetConfig } from '../providers';
+
+const defaultExpandableWidth = 852;
+
+export const useExpandableVariant = () => {
+  const { variant } = useWidgetConfig();
+  const expandableAllowed = useMediaQuery((theme: Theme) => {
+    return theme.breakpoints.up(defaultExpandableWidth);
+  });
+  return variant === 'expandable' && expandableAllowed;
+};

packages/widget/src/pages/MainPage/MainPage.tsx

@@ -8,20 +8,20 @@ import {
 } from '../../components/SendToWallet';
 import { SwapInput } from '../../components/SwapInput';
 import { SwapRoutes } from '../../components/SwapRoutes';
-import { useWidgetConfig } from '../../providers';
+import { useExpandableVariant } from '../../hooks';
 import { FormContainer } from './MainPage.style';
 import { MainSwapButton } from './MainSwapButton';
 
 export const MainPage: React.FC = () => {
-  const { variant } = useWidgetConfig();
+  const expandable = useExpandableVariant();
   return (
     <FormContainer disableGutters>
       <ActiveSwaps mx={3} mt={1} mb={2} />
       <SelectChainAndToken mt={1} mx={3} mb={3} />
       <Box mx={3} mb={3}>
         <SwapInput formType="from" />
       </Box>
-      {variant !== 'expandable' ? <SwapRoutes mx={3} mb={3} /> : null}
+      {!expandable ? <SwapRoutes mx={3} mb={3} /> : null}
       <GasSufficiencyMessage mx={3} mb={3} />
       <Box mx={3} mb={1}>
         <SendToWallet mb={3} />