fix(content): tighten SectionList grid to use main-content width

Replace centered flex and 90% width cap with a full-width auto-fill grid so content cards fill the main column without side dead space. Use grid-cell vertical-only margins to prevent horizontal overflow, drop viewport-based card max-width, and consolidate card chrome in shared CSS with a --content-card-min theme token.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: graffhyrum

.changeset/sectionlist-layout-tighten.md

@@ -0,0 +1,5 @@
+---
+'pendragon-coding': patch
+---
+
+Tighten SectionList layout: full-width CSS grid for card sections, remove viewport-capped short-form card width, and use vertical-only card margins in grid cells to prevent horizontal overflow past main-content.

src/components/content/ContentCard.astro

@@ -29,7 +29,7 @@ if (isTestimonial && description.includes('<br><br>')) {
 const isLinkedIn = (href: string) => href.includes('linkedin.com');
 ---
 
-<Card variant={cardVariant} id={contentId}>
+<Card variant={cardVariant} id={contentId} gridCell={layoutMode === 'grid'}>
 	{isTestimonial ? (
 		<div class="testimonial-card">
 			{/* Quote icon */}

src/components/content/SectionList.astro

@@ -16,15 +16,12 @@ interface Props {
 
 const { layoutMode, contentKind, content, sectionTitle } = Astro.props;
 
-const baseClasses = ['flex', 'max-w-9/10', 'mx-auto'];
+const listLayout = 'w-full gap-4';
+const ulClasses =
+	layoutMode === 'single-column'
+		? `flex flex-col ${listLayout} items-stretch`
+		: `grid ${listLayout} min-w-0 grid-cols-[repeat(auto-fill,minmax(min(var(--content-card-min),100%),1fr))]`;
 
-if (layoutMode === 'single-column') {
-	baseClasses.push('flex-col', 'items-center', 'gap-4');
-} else {
-	baseClasses.push('flex-wrap', 'justify-center');
-}
-
-const ulClasses = baseClasses.join(' ');
 ---
 
 <ul class={ulClasses} role="list">

src/components/ui/Card.astro

@@ -6,6 +6,7 @@ interface Props {
 	maxWidth?: string;
 	minWidth?: string;
 	className?: string;
+	gridCell?: boolean;
 	[key: string]: unknown;
 }
 
@@ -14,34 +15,21 @@ const {
 	maxWidth = '',
 	minWidth = '',
 	className = '',
+	gridCell = false,
 	...rest
 } = Astro.props;
 
-const baseClasses = [
-	// Base styles
-	'outline-solid outline-2 outline-green-700',
-	'w-full m-4 p-5 rounded-xl',
-	// bg-green-950 provides a solid dark base so the semi-transparent gradient
-	// always renders on dark green, not the page body — ensures WCAG AA link contrast
-	'bg-green-950 bg-gradient-to-br from-green-950/80 to-green-900/40',
-
-	// Transitions
-	'transition-all duration-300',
-
-	// Interactive states
-	'hover:outline-green-500 hover:shadow-lg hover:shadow-green-900/50',
-	'hover:-translate-y-1 hover:scale-[1.02]',
-	'focus-within:outline-green-500 focus-within:shadow-lg focus-within:shadow-green-900/50',
-	'focus-within:-translate-y-1 focus-within:scale-[1.02]',
+const fillsCell = variant === 'long-form' || gridCell;
+const chromeClasses = [
+	'card-chrome',
+	gridCell ? 'card-chrome--grid-cell' : 'card-chrome--inset',
+	fillsCell ? 'max-w-full' : 'min-w-[min(var(--content-card-min),100%)] max-w-full',
 ].join(' ');
 
-const sizeStyle =
-	variant === 'long-form'
-		? `max-width: 100%; ${minWidth ? `min-width: ${minWidth};` : ''}`
-		: `min-width: min(360px, 100%); max-width: min(20vw, 100%); ${minWidth ? `min-width: ${minWidth};` : ''}`;
+const sizeStyle = minWidth ? `min-width: ${minWidth};` : undefined;
 ---
 <li
-	class={`${baseClasses} ${maxWidth} ${className}`}
+	class={`${chromeClasses} ${maxWidth} ${className}`}
 	style={sizeStyle}
 	{...rest}
 >

src/styles/styles.css

@@ -23,6 +23,9 @@
     --ease-default: ease;
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    /* Content card grid: min track width (SectionList + flex short-form cards) */
+    --content-card-min: 360px;
 }
 
 
@@ -336,6 +339,26 @@ p {
     border-radius: 0.25rem;
 }
 
+/* Shared <li> chrome for Card.astro (content pages + blog) */
+.card-chrome {
+    @apply outline-solid outline-2 outline-green-700 w-full p-5 rounded-xl
+        bg-green-950 bg-gradient-to-br from-green-950/80 to-green-900/40
+        transition-all duration-300;
+}
+
+.card-chrome:hover,
+.card-chrome:focus-within {
+    @apply outline-green-500 shadow-lg shadow-green-900/50 -translate-y-1 scale-[1.02];
+}
+
+.card-chrome--inset {
+    @apply m-4;
+}
+
+.card-chrome--grid-cell {
+    @apply my-4 mx-0 min-w-0;
+}
+
 /* --- Testimonial card styles --- */
 
 .testimonial-card {