Merge pull request #992 from tradingview/fix-landing-page-chart-overflow

Fix landing page chart overflow
tradingview · Jan 28, 2022 · 1d49f27 · 1d49f27
2 parents 54ee7d5 + 9f80905
commit 1d49f27
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -81,8 +81,3 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 	--color: var(--icon-color);
 }
 
-.main-wrapper {
-	display: flex;
-	justify-content: center;
-	gap: 2rem;
-}
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
@@ -8,6 +8,15 @@
 	display: none;
 }
 
+.HeroChartContainer * {
+	overflow: hidden;
+}
+
+.HeroChartContainer table td,
+.HeroChartContainer table tr {
+	border: none;
+}
+
 .HeroTextContainer {
 	display: flex;
 	flex-direction: column;
@@ -159,6 +168,10 @@
 }
 
 @media (min-width: 767.5px) {
+	.RootContainer {
+		max-width: unset;
+	}
+
 	.HeroButtonsContainer {
 		min-width: unset;
 		flex-wrap: unset;
@@ -210,9 +223,8 @@
 
 	.HeroChartContainer {
 		display: unset;
-		/* width: 100%; */
-		height: 40vh;
-		width: 100vw;
+		min-height: 500px;
+		width: 100%;
 	}
 
 	.HeroTextContainer {
@@ -236,15 +248,15 @@
 	.LargeCardContainer {
 		flex-wrap: nowrap;
 	}
-	
+
 	.LargeCard, LargeCard3 {
 		flex: 0 1 30%;
 	}
 
 	.SmallCardContainer {
 		flex-wrap: nowrap;
 	}
-	
+
 	.SmallCard {
 		flex: 0 1 23%;
 	}
@@ -290,8 +302,8 @@
 	.LargeCardContainer {
 		max-width: 77%;
 	}
-	
+
 	.SmallCardContainer {
 		max-width: 77%;
 	}
-}
+}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -42,7 +42,7 @@ function HeroChart(): JSX.Element {
 
 	const [chart, setChart] = React.useState<IChartApi | null>(null);
 
-	React.useLayoutEffect(
+	React.useEffect(
 		() => {
 			const container = ref.current;
 
@@ -52,6 +52,9 @@ function HeroChart(): JSX.Element {
 
 			const c = createChart(container, {
 				layout,
+				rightPriceScale: {
+					borderVisible: false,
+				},
 				grid: {
 					horzLines: {
 						visible: false,
@@ -61,6 +64,7 @@ function HeroChart(): JSX.Element {
 					},
 				},
 				timeScale: {
+					borderVisible: false,
 					fixLeftEdge: true,
 					fixRightEdge: true,
 					lockVisibleTimeRangeOnResize: true,
@@ -83,7 +87,7 @@ function HeroChart(): JSX.Element {
 			orangeSeries.setData(data.orangeData as LineData[]);
 			blueSeries.setData(data.blueData as LineData[]);
 
-			c.timeScale().setVisibleLogicalRange({ from: 1, to: data.orangeData.length - 2 });
+			c.timeScale().setVisibleLogicalRange({ from: 0.5, to: data.orangeData.length - 1.5 });
 
 			const resizeListener = () => {
 				const { width, height } = container.getBoundingClientRect();