Make charts bigger on larger screens (#1042)

* Make charts bigger on larger screens * Create tasty-ads-melt.md * feat: expand convert page panel --------- Co-authored-by: Victor Creed <[email protected]>
DistributedCollective · Oct 31, 2024 · a5b4f38 · a5b4f38
1 parent c426bb8
commit a5b4f38
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/tasty-ads-melt.md b/.changeset/tasty-ads-melt.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+Make charts bigger on larger screens
diff --git a/apps/frontend/src/app/2_molecules/TradingChart/TradingChart.tsx b/apps/frontend/src/app/2_molecules/TradingChart/TradingChart.tsx
@@ -75,7 +75,7 @@ export const TradingChart: FC<TradingChartProps> = ({ pair }) => {
   }, [chart, hasCharts, pair]);
 
   return (
-    <div className="lg:mt-12 mt-6 w-full p-0 sm:border sm:border-gray-50 sm:rounded sm:p-6 sm:bg-gray-90">
+    <div className="w-full p-0 sm:border sm:border-gray-50 sm:rounded sm:p-6 sm:bg-gray-90">
       <div ref={chartContainerRef} className="h-full min-h-96" />
     </div>
   );

diff --git a/apps/frontend/src/app/5_pages/ConvertPage/ConvertPage.tsx b/apps/frontend/src/app/5_pages/ConvertPage/ConvertPage.tsx
@@ -625,10 +625,10 @@ const ConvertPage: FC = () => {
           {t(pageTranslations.subtitle)}
         </Paragraph>
 
-        <div className="flex flex-col-reverse lg:flex-row lg:space-x-6 xl:w-9/12 w-full">
+        <div className="flex flex-col-reverse lg:flex-row lg:space-x-6 xl:w-9/12 w-full h-full mt-6 lg:mt-12">
           <TradingChart pair={renderPair} />
 
-          <div className="lg:mt-12 mt-6 p-0 sm:border sm:border-gray-50 sm:rounded lg:min-w-[28rem] sm:p-6 sm:bg-gray-90">
+          <div className="p-0 sm:border sm:border-gray-50 sm:rounded lg:min-w-[28rem] sm:p-6 sm:bg-gray-90 self-start h-full">
             <div className="bg-gray-80 rounded p-6">
               <div className="w-full flex flex-row justify-between items-center">
                 <Paragraph size={ParagraphSize.base} className="font-medium">