fix(uitkit): Menu height css (#5088)

* fix(uitkit): Menu height css

* remove comment

* fix(web): Add missing local packages

* update snapshot

apps/aptos/components/Layout/ExchangeLayout.tsx

@@ -1,20 +1,13 @@
 import { Image, Swap } from '@pancakeswap/uikit'
-import { usePhishingBanner } from 'state/user/phishingBanner'
-import NoSSR from 'components/NoSSR'
 
 export const ExchangeLayout = ({ children }: React.PropsWithChildren) => {
-  const [showPhishingBanner] = usePhishingBanner()
-
   return (
-    <NoSSR>
-      <Swap.Page
-        helpUrl="https://docs.pancakeswap.finance/get-started-aptos"
-        isEvm={false}
-        helpImage={<Image src="/help.png" width={178} height={243} />}
-        hasWarningBanner={showPhishingBanner}
-      >
-        {children}
-      </Swap.Page>
-    </NoSSR>
+    <Swap.Page
+      helpUrl="https://docs.pancakeswap.finance/get-started-aptos"
+      isEvm={false}
+      helpImage={<Image src="/help.png" width={178} height={243} />}
+    >
+      {children}
+    </Swap.Page>
   )
 }

apps/web/package.json

@@ -90,6 +90,13 @@
     "wagmi": "^0.6.7",
     "@pancakeswap/wagmi": "*",
     "@pancakeswap/sdk": "*",
+    "@pancakeswap/uikit": "*",
+    "@pancakeswap/farms": "*",
+    "@pancakeswap/localization": "*",
+    "@pancakeswap/hooks": "*",
+    "@pancakeswap/multicall": "*",
+    "@pancakeswap/token-lists": "*",
+    "@pancakeswap/utils": "*",
     "@pancakeswap/tokens": "*"
   },
   "devDependencies": {

apps/web/src/components/Layout/Page.tsx

@@ -7,6 +7,7 @@ import { useCakeBusdPrice } from 'hooks/useBUSDPrice'
 import Container from './Container'
 
 const StyledPage = styled(Container)`
+  width: 100%;
   min-height: calc(100vh - 64px);
   padding-top: 16px;
   padding-bottom: 16px;

apps/web/src/views/Swap/index.tsx

@@ -65,7 +65,7 @@ export default function Swap() {
 
   return (
     <Page removePadding={isChartExpanded} hideFooterOnDesktop={isChartExpanded}>
-      <Flex width="100%" justifyContent="center" position="relative">
+      <Flex width={['328px', , '100%']} justifyContent="center" position="relative">
         {!isMobile && isChartSupported && (
           <PriceChartContainer
             inputCurrencyId={inputCurrencyId}

packages/ui/css/sprinkles.css.ts

@@ -29,6 +29,7 @@ const extendedSpace = {
 } as const
 
 const margin = { ...vars.space, auto: 'auto' }
+const extendedHeight = { '100vh': '100vh' }
 
 const responsiveProperties = defineProperties({
   conditions: {
@@ -56,7 +57,7 @@ const responsiveProperties = defineProperties({
     justifyItems: [...flexAlignment, 'space-around', 'space-between'],
     justifySelf: [...flexAlignment],
     inset: { ...vars.space, ...negativeSpace },
-    height: { ...vars.space, ...extendedSpace },
+    height: { ...vars.space, ...extendedSpace, ...extendedHeight },
     left: { ...vars.space, ...negativeSpace },
     marginBottom: { ...margin, ...negativeSpace },
     marginLeft: { ...margin, ...negativeSpace },
@@ -70,7 +71,7 @@ const responsiveProperties = defineProperties({
       ...extendedSpace,
       none: 'none',
     },
-    minHeight: vars.space,
+    minHeight: { ...vars.space, ...extendedSpace, ...extendedHeight },
     minWidth: vars.space,
     paddingBottom: vars.space,
     paddingLeft: vars.space,

packages/uikit/package.json

@@ -40,7 +40,7 @@
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@types/react-router-dom": "^5.1.7",
-    "@vanilla-extract/vite-plugin": "^3.3.1",
+    "@vanilla-extract/vite-plugin": "^3.6.1",
     "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.2",
     "babel-plugin-styled-components": "^1.12.0",