From 463428f5be9374ce8f5ebe6a6cf0d619ea91e65e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 11 Jun 2026 08:02:13 +0000 Subject: [PATCH 1/5] Initial plan From 37bfad3b8e8888219eb1613f2b75b72776e135bb Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 11 Jun 2026 08:08:58 +0000 Subject: [PATCH 2/5] fix: resolve homepage card height and spacing inconsistencies - Change DocHomeCardContainer gridTemplateColumns from repeat(auto-fit, minmax(224px, 30%)) to repeat(auto-fill, minmax(224px, 1fr)): * 1fr distributes space equally so all columns are the same width * auto-fill keeps empty end-tracks so last-row cards stay the same width as cards in full rows (no stretching) - Add display: block to DocHomeCard (Box component="a") so the anchor element reliably fills the full grid-cell height via the default align-items: stretch --- src/components/MDXComponents/DocHome.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MDXComponents/DocHome.tsx b/src/components/MDXComponents/DocHome.tsx index 151cee40..ad400e7b 100644 --- a/src/components/MDXComponents/DocHome.tsx +++ b/src/components/MDXComponents/DocHome.tsx @@ -341,9 +341,8 @@ export function DocHomeCardContainer(props: any) { sm: "grid", }, flexDirection: "column", - gridTemplateColumns: "repeat(auto-fit, minmax(224px, 30%))", + gridTemplateColumns: "repeat(auto-fill, minmax(224px, 1fr))", gap: "1.25rem", - justifyContent: "start", "& > a.doc-home-card": { backgroundColor: theme.palette.carbon[50], @@ -386,6 +385,7 @@ export function DocHomeCard(props: React.PropsWithChildren) { referrerPolicy="no-referrer-when-downgrade" href={href} sx={(theme) => ({ + display: "block", position: "relative", zIndex: 0, padding: "24px", From 8859a3b3ce21bc05e7b39e38cf9128057ee8fe40 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 11 Jun 2026 10:07:20 +0000 Subject: [PATCH 3/5] fix: remove empty grid tracks in homepage card layout --- src/components/MDXComponents/DocHome.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MDXComponents/DocHome.tsx b/src/components/MDXComponents/DocHome.tsx index ad400e7b..07075969 100644 --- a/src/components/MDXComponents/DocHome.tsx +++ b/src/components/MDXComponents/DocHome.tsx @@ -341,7 +341,7 @@ export function DocHomeCardContainer(props: any) { sm: "grid", }, flexDirection: "column", - gridTemplateColumns: "repeat(auto-fill, minmax(224px, 1fr))", + gridTemplateColumns: "repeat(auto-fit, minmax(224px, 1fr))", gap: "1.25rem", "& > a.doc-home-card": { From e4815ba9869c54dcff896844227347bdcf40295a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 11 Jun 2026 11:18:48 +0000 Subject: [PATCH 4/5] fix: keep homepage doc cards in three columns on desktop --- src/components/MDXComponents/DocHome.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/MDXComponents/DocHome.tsx b/src/components/MDXComponents/DocHome.tsx index 07075969..7095c928 100644 --- a/src/components/MDXComponents/DocHome.tsx +++ b/src/components/MDXComponents/DocHome.tsx @@ -341,7 +341,10 @@ export function DocHomeCardContainer(props: any) { sm: "grid", }, flexDirection: "column", - gridTemplateColumns: "repeat(auto-fit, minmax(224px, 1fr))", + gridTemplateColumns: { + sm: "repeat(auto-fit, minmax(224px, 1fr))", + md: "repeat(3, minmax(224px, 1fr))", + }, gap: "1.25rem", "& > a.doc-home-card": { From d9d1bbf474604a33416df798d48bb3e86af42770 Mon Sep 17 00:00:00 2001 From: lilin90 Date: Mon, 15 Jun 2026 10:56:18 +0800 Subject: [PATCH 5/5] Adjust DocHome card grid and props Refactor DocHome card layout: tighten grid breakpoints to use minmax(0, 1fr) and fixed 2-column small layout, add justifyContent: start, and ensure cards use box-sizing and full height to prevent overflow. Add a colspan alias and compute cardColSpan (colSpan ?? colspan), then apply responsive gridColumn spans (limit to 2 on small screens, full span on md). These changes improve responsive behavior and consistent card sizing across viewports. --- src/components/MDXComponents/DocHome.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/MDXComponents/DocHome.tsx b/src/components/MDXComponents/DocHome.tsx index 7095c928..91afad82 100644 --- a/src/components/MDXComponents/DocHome.tsx +++ b/src/components/MDXComponents/DocHome.tsx @@ -342,10 +342,11 @@ export function DocHomeCardContainer(props: any) { }, flexDirection: "column", gridTemplateColumns: { - sm: "repeat(auto-fit, minmax(224px, 1fr))", - md: "repeat(3, minmax(224px, 1fr))", + sm: "repeat(2, minmax(0, 1fr))", + md: "repeat(3, minmax(0, 1fr))", }, gap: "1.25rem", + justifyContent: "start", "& > a.doc-home-card": { backgroundColor: theme.palette.carbon[50], @@ -365,6 +366,7 @@ interface DocHomeCardProps { icon: string; label: string; colSpan?: 1 | 2 | 3; + colspan?: 1 | 2 | 3; actionBtnLabel?: string; ctaGraphic?: string; } @@ -376,9 +378,11 @@ export function DocHomeCard(props: React.PropsWithChildren) { icon = "global-tidb-product", label, colSpan, + colspan, actionBtnLabel, ctaGraphic, } = props; + const cardColSpan = colSpan ?? colspan; return ( ) { href={href} sx={(theme) => ({ display: "block", + boxSizing: "border-box", + height: "100%", position: "relative", zIndex: 0, padding: "24px", transition: ".5s", border: `1px solid ${theme.palette.carbon[400]}`, - gridColumn: colSpan ? `span ${colSpan}` : undefined, + gridColumn: cardColSpan + ? { + sm: `span ${Math.min(cardColSpan, 2)}`, + md: `span ${cardColSpan}`, + } + : undefined, "&:hover": { background: