Merge pull request #1842 from IndexCoop/fix/chart-layout-overflow

fix: chart layout overflow

Author: 0xonramp

src/app/leverage/components/faq-section/index.tsx

@@ -4,7 +4,7 @@ import { FaqItem, FaqList } from '@/components/faq'
 
 export function FaqSection() {
   return (
-    <FaqList className='mx-auto my-12 w-full !max-w-7xl px-4 sm:px-6 md:mx-8'>
+    <FaqList className='mx-auto my-4 w-full !max-w-7xl px-4 sm:my-8 sm:px-6 md:mx-8 md:my-12'>
       <FaqItem
         question='How does the Leverage Suite work?'
         id='faq-leverage-interface'

src/app/leverage/components/leverage-panel/index.tsx

@@ -7,13 +7,11 @@ import { TradingViewChart } from '@/app/leverage/components/trading-view-chart'
 
 export function LeveragePanel() {
   return (
-    <div className='flex flex-col gap-4 lg:h-[630px] lg:flex-row'>
-      <div className='xs:h-[442px] aspect-square w-full lg:flex lg:aspect-auto lg:basis-2/3 lg:flex-col lg:gap-4'>
-        <div className='relative h-full w-full'>
-          <TradingViewChart />
-          <div className='hidden lg:block lg:pt-4'>
-            <PortfolioWidget />
-          </div>
+    <div className='flex flex-col gap-4 lg:flex-row'>
+      <div className='w-full lg:flex lg:aspect-auto lg:basis-2/3 lg:flex-col lg:gap-4'>
+        <TradingViewChart />
+        <div className='hidden lg:block lg:pt-4'>
+          <PortfolioWidget />
         </div>
       </div>
       <div className='flex w-full lg:w-auto lg:basis-1/3 lg:flex-col lg:gap-4'>

src/app/leverage/components/portfolio-widget/table.tsx

@@ -41,7 +41,7 @@ export const TableRenderer = ({ table, emptyText, isFetching }: TableProps) => {
           </div>
         ))}
       </div>
-      <div className='flex max-h-[300px] w-full flex-col gap-1 overflow-y-auto rounded-md pb-12'>
+      <div className='flex max-h-[300px] min-h-[232px] w-full flex-col gap-1 overflow-y-auto rounded-md pb-12'>
         {isFetching ? (
           <div className='flex w-full flex-col gap-3 px-4 py-2'>
             {[1, 2, 3].map((n) => (

src/app/leverage/components/trading-view-chart.tsx

@@ -11,7 +11,7 @@ export function TradingViewChart() {
   const { isConnected } = useWallet()
   const { open } = useAppKit()
   return (
-    <div className='relative h-full w-full'>
+    <div className='xs:h-[422px] relative aspect-square w-full lg:aspect-auto'>
       <Script
         src='/tradingview-chart/datafeeds/udf/dist/bundle.js'
         onLoad={() => {