From d91d3e7829d98a7c6aad3e196ab6d3d75fd49bb0 Mon Sep 17 00:00:00 2001
From: Soon <sooniter@gmail.com>
Date: Tue, 27 Aug 2024 11:36:18 +0800
Subject: [PATCH] docs(landingpage): fix the section width (#7695)

docs: section width
---
 .../FullyFeatured/index.module.scss           |  2 +-
 .../Landingpage/WhyRspack/index.module.scss   | 31 +------------------
 .../Landingpage/WhyRspack/index.tsx           |  5 +--
 .../components/Landingpage/shared.module.scss |  3 +-
 4 files changed, 7 insertions(+), 34 deletions(-)

diff --git a/website/theme/components/Landingpage/FullyFeatured/index.module.scss b/website/theme/components/Landingpage/FullyFeatured/index.module.scss
index 720af5ee3c3..641e7b4ca88 100644
--- a/website/theme/components/Landingpage/FullyFeatured/index.module.scss
+++ b/website/theme/components/Landingpage/FullyFeatured/index.module.scss
@@ -54,7 +54,7 @@
 
   .featureCard {
     display: flex;
-    flex: 1 0 25%;
+    flex: 1 1 25%;
     align-items: flex-start;
     gap: 16px;
     min-height: 110px;
diff --git a/website/theme/components/Landingpage/WhyRspack/index.module.scss b/website/theme/components/Landingpage/WhyRspack/index.module.scss
index a8a1514f806..be24245d6c1 100644
--- a/website/theme/components/Landingpage/WhyRspack/index.module.scss
+++ b/website/theme/components/Landingpage/WhyRspack/index.module.scss
@@ -1,9 +1,6 @@
 // ---------- responsive layout
 // XXL
 @media screen and (min-width: 1441px) {
-  .container {
-    padding: 32px 80px !important;
-  }
   .featureCard {
     flex: 1 0 30% !important;
   }
@@ -11,9 +8,6 @@
 
 // XL
 @media screen and (min-width: 1281px) and (max-width: 1440px) {
-  .container {
-    padding: 32px 80px !important;
-  }
   .featureCard {
     flex: 1 0 30% !important;
   }
@@ -21,9 +15,6 @@
 
 // L
 @media screen and (min-width: 835px) and (max-width: 1280px) {
-  .container {
-    padding: 32px 80px !important;
-  }
   .featureCard {
     min-width: 40% !important;
     max-width: 50% !important;
@@ -32,9 +23,6 @@
 
 // M
 @media screen and (min-width: 601px) and (max-width: 834px) {
-  .container {
-    padding: 24px !important;
-  }
   .whyRspack {
     padding: 16px !important;
     .whyRspackTitle {
@@ -64,9 +52,6 @@
 
 // S
 @media screen and (max-width: 600px) {
-  .container {
-    padding: 24px !important;
-  }
   .whyRspack {
     min-width: 100% !important;
     padding: 16px !important;
@@ -97,21 +82,7 @@
   // extra
   .whyRspackBg {
     max-width: 50% !important;
-  }
-}
-
-.container {
-  display: flex;
-  padding: 32px 144px;
-  justify-content: center;
-  align-items: center;
-
-  .innerContainer {
-    width: 100%;
-    max-width: 1440px;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
+    max-height: 50% !important;
   }
 }
 
diff --git a/website/theme/components/Landingpage/WhyRspack/index.tsx b/website/theme/components/Landingpage/WhyRspack/index.tsx
index 45358dc270d..159e9a54096 100644
--- a/website/theme/components/Landingpage/WhyRspack/index.tsx
+++ b/website/theme/components/Landingpage/WhyRspack/index.tsx
@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import { Link } from 'rspress/theme';
 import { useI18n, useI18nUrl } from '../../../i18n';
+import sharedStyles from '../shared.module.scss';
 import Compatible from './assets/Compatible.svg';
 import FrameCheck from './assets/FrameCheck.svg';
 import Lightning from './assets/Lightning.svg';
@@ -203,8 +204,8 @@ const WhyRspack = memo(() => {
   ];
 
   return (
-    <section className={styles.container}>
-      <div className={styles.innerContainer}>
+    <section className={sharedStyles.container}>
+      <div className={sharedStyles.innerContainer}>
         <div className={styles.features}>
           {/* Why Rspack? */}
           <WhyRspackCard />
diff --git a/website/theme/components/Landingpage/shared.module.scss b/website/theme/components/Landingpage/shared.module.scss
index 5ba0e9accca..97ed9aa6029 100644
--- a/website/theme/components/Landingpage/shared.module.scss
+++ b/website/theme/components/Landingpage/shared.module.scss
@@ -91,7 +91,8 @@
     gap: 32px;
     flex-direction: column;
     width: 100%;
-    max-width: 1280px;
+
+    max-width: 1440px;
   }
 }