From 727536a041bb9e86a1c1fa2318bf3941d852edf9 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 18 Nov 2025 15:24:32 -0500
Subject: [PATCH 1/2] fix(styles): stretch single card to full width on smaller
 screens

---
 src/components/global/DocsCards/cards.css | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/global/DocsCards/cards.css b/src/components/global/DocsCards/cards.css
index 760d7c9046..8dea0b8f4a 100644
--- a/src/components/global/DocsCards/cards.css
+++ b/src/components/global/DocsCards/cards.css
@@ -7,12 +7,15 @@ docs-cards {
 
 /*
  * This prevents a single card from stretching the full width by
- * forcing a 2-column grid layout (a single card will only take up
- * 1 column instead of stretching across both). This is used on the
+ * adding an invisible pseudo-element as a second grid item. This
+ * creates a 2-column layout on larger screens (card takes 1 column)
+ * and collapses to full width on smaller screens. Used on the
  * Packages & CDN page by the JavaScript section.
  */
-docs-cards:has(docs-card:only-child) {
-  grid-template-columns: 1fr 1fr;
+docs-cards:has(docs-card:only-child)::after {
+  content: '';
+  display: block;
+  visibility: hidden;
 }
 
 docs-cards > docs-card {

From a5283b3a1e4e52170fc50c9d637dbb446ebf37b3 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 18 Nov 2025 15:31:26 -0500
Subject: [PATCH 2/2] style

---
 src/components/global/DocsCards/cards.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/global/DocsCards/cards.css b/src/components/global/DocsCards/cards.css
index 8dea0b8f4a..cee05f91c3 100644
--- a/src/components/global/DocsCards/cards.css
+++ b/src/components/global/DocsCards/cards.css
@@ -9,7 +9,7 @@ docs-cards {
  * This prevents a single card from stretching the full width by
  * adding an invisible pseudo-element as a second grid item. This
  * creates a 2-column layout on larger screens (card takes 1 column)
- * and collapses to full width on smaller screens. Used on the
+ * and collapses to full width on smaller screens. This is used on the
  * Packages & CDN page by the JavaScript section.
  */
 docs-cards:has(docs-card:only-child)::after {