From 12a0789f24b1e0aaa812b5949313229262245158 Mon Sep 17 00:00:00 2001
From: ming <silverchris@foxmail.com>
Date: Thu, 27 Aug 2026 21:31:37 +0800
Subject: [PATCH 1/2] fix(site): align install requirements grid responsively

---
 apps/site/app/install/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/site/app/install/page.tsx b/apps/site/app/install/page.tsx
index 1c38276..5a4f5cd 100644
--- a/apps/site/app/install/page.tsx
+++ b/apps/site/app/install/page.tsx
@@ -114,7 +114,7 @@ export default async function InstallPage() {
         <section className="pb-4">
           <div className="page-shell">
             <div className="surface-panel overflow-hidden p-0">
-              <div className="grid divide-y divide-white/10 md:grid-cols-4 md:divide-x md:divide-y-0">
+              <div className="grid md:grid-cols-3 lg:grid-cols-5 [&>*]:border-b [&>*]:border-white/10 [&>*:last-child]:border-b-0 md:[&>*]:border-b-0 md:[&>*]:border-l md:[&>*]:border-t md:[&>*:nth-child(-n+3)]:border-t-0 md:[&>*:first-child]:border-l-0 md:[&>*:nth-child(4)]:border-l-0 lg:[&>*]:border-b-0 lg:[&>*]:border-t-0 lg:[&>*:nth-child(4)]:border-l">
                 {requirements.map((item, index) => (
                   <div
                     key={item}

From f598978a0064508122286d2dd7de17c68460f54b Mon Sep 17 00:00:00 2001
From: huyua9 <huyua9@outlook.com>
Date: Sat, 12 Sep 2026 03:16:23 +0800
Subject: [PATCH 2/2] fix(site): draw requirement grid dividers structurally

Replace the nth-child border overrides with a 1px-gap hairline grid:
the container holds the divider color and each cell paints its own
background, so dividers appear wherever cells actually meet at any
breakpoint or item count, with no positional selectors.
---
 apps/site/app/globals.css      | 17 +++++++++++++++++
 apps/site/app/install/page.tsx |  4 ++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/apps/site/app/globals.css b/apps/site/app/globals.css
index d6872ef..f7d3196 100644
--- a/apps/site/app/globals.css
+++ b/apps/site/app/globals.css
@@ -67,6 +67,23 @@ a {
     @apply border-white/10;
   }
 
+  .requirements-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  @media (min-width: 768px) {
+    .requirements-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .requirements-grid {
+      grid-template-columns: repeat(5, 1fr);
+    }
+  }
+
   .text-balance {
     text-wrap: balance;
   }
diff --git a/apps/site/app/install/page.tsx b/apps/site/app/install/page.tsx
index 5a4f5cd..3050cdb 100644
--- a/apps/site/app/install/page.tsx
+++ b/apps/site/app/install/page.tsx
@@ -114,11 +114,11 @@ export default async function InstallPage() {
         <section className="pb-4">
           <div className="page-shell">
             <div className="surface-panel overflow-hidden p-0">
-              <div className="grid md:grid-cols-3 lg:grid-cols-5 [&>*]:border-b [&>*]:border-white/10 [&>*:last-child]:border-b-0 md:[&>*]:border-b-0 md:[&>*]:border-l md:[&>*]:border-t md:[&>*:nth-child(-n+3)]:border-t-0 md:[&>*:first-child]:border-l-0 md:[&>*:nth-child(4)]:border-l-0 lg:[&>*]:border-b-0 lg:[&>*]:border-t-0 lg:[&>*:nth-child(4)]:border-l">
+              <div className="requirements-grid gap-px bg-white/10">
                 {requirements.map((item, index) => (
                   <div
                     key={item}
-                    className="group px-5 py-5 transition-colors hover:bg-cyan-300/[0.025] md:px-6 md:py-6"
+                    className="group bg-white/[0.035] px-5 py-5 transition-colors hover:bg-cyan-300/[0.025] md:px-6 md:py-6"
                   >
                     <div className="mb-4 flex items-center justify-between">
                       <span className="font-mono text-[11px] font-semibold tracking-[0.22em] text-cyan-300/70">