diff --git a/website/docs/en/guide/start/index.mdx b/website/docs/en/guide/start/index.mdx
index 89945761d6..963a5de8f1 100644
--- a/website/docs/en/guide/start/index.mdx
+++ b/website/docs/en/guide/start/index.mdx
@@ -30,7 +30,7 @@ Rsbuild's build performance is on par with native Rspack. This is the time it ta
import { BenchmarkGraph } from '@components/Benchmark';
-
+
> The above data comes from the [performance-compare](https://github.com/rspack-contrib/performance-compare) benchmark.
diff --git a/website/docs/zh/guide/start/index.mdx b/website/docs/zh/guide/start/index.mdx
index 3f54ded726..0558d8ecc5 100644
--- a/website/docs/zh/guide/start/index.mdx
+++ b/website/docs/zh/guide/start/index.mdx
@@ -30,7 +30,7 @@ Rsbuild 的构建性能与原生 Rspack 处于同一水平,以下是构建 100
import { BenchmarkGraph } from '@components/Benchmark';
-
+
> 以上数据来自 [performance-compare](https://github.com/rspack-contrib/performance-compare) benchmark。
diff --git a/website/theme/components/Benchmark.module.scss b/website/theme/components/Benchmark.module.scss
index 60bd2bf633..ec3d77b08e 100644
--- a/website/theme/components/Benchmark.module.scss
+++ b/website/theme/components/Benchmark.module.scss
@@ -21,6 +21,13 @@
margin-top: 4rem;
}
+.short {
+ // Temp code to fix the width of the graph
+ :global(.container_72b36) {
+ width: 40vw;
+ }
+}
+
@media (min-width: 640px) {
.title {
font-size: 3rem;
diff --git a/website/theme/components/Benchmark.tsx b/website/theme/components/Benchmark.tsx
index 21f60912f0..30ee7d11e7 100644
--- a/website/theme/components/Benchmark.tsx
+++ b/website/theme/components/Benchmark.tsx
@@ -79,8 +79,14 @@ const BENCHMARK_DATA: BenchmarkData = {
},
};
-export function BenchmarkGraph() {
- return ;
+export function BenchmarkGraph(props: { short?: boolean }) {
+ return props.short ? (
+
+
+
+ ) : (
+
+ );
}
export function Benchmark() {