added full width layout for trade page (#274)

src/components/Account/AccountDetails.tsx

@@ -12,7 +12,7 @@ export default function AccountDetails() {
   return hasAccount ? (
     <div
       data-testid='account-details'
-      className='fixed right-4 top-[89px] w-16 rounded-base border border-white/20 bg-white/5 backdrop-blur-sticky'
+      className='w-16 rounded-base border border-white/20 bg-white/5 backdrop-blur-sticky'
     >
       <div className='flex w-full flex-wrap justify-center py-4'>
         <Gauge tooltip='Health Factor' percentage={20} icon={<Heart />} />

src/components/Trade/OrderBook.tsx

@@ -24,7 +24,7 @@ function Fallback() {
 
 export default function OrderBook() {
   return (
-    <Card className='col-span-3 bg-white/5' title='Order Book' contentClassName='px-4 py-6'>
+    <Card className='bg-white/5' title='Order Book' contentClassName='px-4 py-6'>
       <Suspense fallback={<Fallback />}>
         <Content />
       </Suspense>

src/components/Trade/TradeModule.tsx

@@ -22,9 +22,13 @@ function Fallback() {
   return <Loading className='h-4 w-50' />
 }
 
-export default function Trade() {
+export default function TradeModule() {
   return (
-    <Card className='h-full w-full bg-white/5' title='Trade Module' contentClassName='px-4 py-6'>
+    <Card
+      className='row-span-2 h-full w-full bg-white/5'
+      title='Trade Module'
+      contentClassName='px-4 py-6'
+    >
       <Suspense fallback={<Fallback />}>
         <Content />
       </Suspense>

src/components/Trade/TradingView.tsx

@@ -14,11 +14,7 @@ function Fallback() {
 
 export default function TradingView() {
   return (
-    <Card
+    <Card className='h-full bg-white/5' title='Trading View' contentClassName='px-4 py-6'>
-      className='col-span-2 h-full bg-white/5'
-      title='Trading View'
-      contentClassName='px-4 py-6'
-    >
       <Suspense fallback={<Fallback />}>
         <Content />
       </Suspense>

src/pages/BorrowPage.tsx

@@ -3,9 +3,9 @@ import { ActiveBorrowings } from 'components/Borrow/Borrowings'
 
 export default function BorrowPage() {
   return (
-    <div className='flex w-full flex-col gap-4'>
+    <>
       <ActiveBorrowings />
       <AvailableBorrowings />
-    </div>
+    </>
   )
 }

src/pages/TradePage.tsx

@@ -1,12 +1,12 @@
 import OrderBook from 'components/Trade/OrderBook'
-import Trade from 'components/Trade/Trade'
+import TradeModule from 'components/Trade/TradeModule'
 import TradingView from 'components/Trade/TradingView'
 
 export default function TradePage() {
   return (
-    <div className='grid w-full grid-flow-row grid-cols-3 grid-rows-2 gap-4'>
+    <div className=' grid w-full grid-cols-[346px_auto] gap-4'>
+      <TradeModule />
       <TradingView />
-      <Trade />
       <OrderBook />
     </div>
   )

src/pages/_layout.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames'
+import { useLocation } from 'react-router-dom'
 
 import AccountDetails from 'components/Account/AccountDetails'
 import Background from 'components/Background'
@@ -9,6 +10,9 @@ import PageMetadata from 'components/PageMetadata'
 import Toaster from 'components/Toaster'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const location = useLocation()
+  const isFullWidth = location.pathname.includes('trade')
+
   return (
     <>
       <PageMetadata />
@@ -16,13 +20,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <DesktopHeader />
       <main
         className={classNames(
-          'relative flex justify-center pt-6',
+          'lg:h-[calc(100vh-89px)]',
-          'lg:mt-[65px] lg:h-[calc(100vh-89px)]',
+          'p-6 lg:mt-[65px]',
+          'align-items-center grid h-full grid-cols-[auto_min-content] place-items-start gap-6',
         )}
       >
-        <div className='flex w-full max-w-content flex-grow flex-wrap content-start'>
+        {isFullWidth ? children : <div className='mx-auto w-full max-w-content'>{children}</div>}
-          {children}
-        </div>
         <AccountDetails />
       </main>
       <Footer />