From 342ae015c79b21f208e058ea5bba440e63b58080 Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Wed, 1 Jul 2026 12:17:14 -0500
Subject: [PATCH] Document the two production-template fixes in the inner-page
 plan

---
 .../plans/2026-07-01-inner-page-layout.md     | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/docs/superpowers/plans/2026-07-01-inner-page-layout.md b/docs/superpowers/plans/2026-07-01-inner-page-layout.md
index f7dd4d7..7c3b92b 100644
--- a/docs/superpowers/plans/2026-07-01-inner-page-layout.md
+++ b/docs/superpowers/plans/2026-07-01-inner-page-layout.md
@@ -186,7 +186,7 @@ if ( ! $intro ) {
 ?>
 
 <section class="page-intro py-12 lg:py-20 text-center" aria-label="<?php echo esc_attr__( 'Page introduction' ); ?>">
-    <div class="container mx-auto max-w-3xl content-wrapper">
+    <div class="mx-auto max-w-3xl content-wrapper">
         <p class="page-intro__text text-lg lg:text-xl leading-relaxed text-dark">
             <?php echo wp_kses_post( $intro ); ?>
         </p>
@@ -194,6 +194,8 @@ if ( ! $intro ) {
 </section>
 ```
 
+Note: the inner `div` intentionally does **not** include the `container` Tailwind class. The project's `styles/base/global.css` defines `.container { max-width: 80.5rem; }` (1288px), which is loaded after the Tailwind utilities in the cascade, so it would override `max-w-3xl` (768px) at desktop and produce an over-wide intro. Use only `mx-auto max-w-3xl` so the cap applies.
+
 - [ ] **Step 2: Lint the new file**
 
 Run: `composer lint -- views/partials/page-intro.php`
@@ -250,13 +252,14 @@ if ( hasSidebar() ) {
 ?>
 
 <article class="<?php echo esc_attr( $classes ); ?>">
+	<?php
+	// Centered intro section between the hero and the body content.
+	if ( get_field( 'intro' ) ) {
+		get_template_part( 'views/partials/page-intro' );
+	}
+	?>
 	<div class="entry-content <?php echo esc_attr( $clsEntry ); ?>">
 		<?php
-		// Centered intro section beneath the hero (rendered by header.php).
-		if ( get_field( 'intro' ) ) {
-			get_template_part( 'views/partials/page-intro' );
-		}
-
 		// Page body content
 		if ( have_posts() ) {
 			while ( have_posts() ) {
@@ -275,6 +278,8 @@ if ( hasSidebar() ) {
 <?php get_footer(); ?>
 ```
 
+Note: the page-intro partial is loaded as a **sibling** of `<div class="entry-content">`, not inside it. When intro is a child of entry-content, the two bounding boxes share the same top y, so the test's `expect(introBox.y).toBeLessThan(contentBox.y)` order assertion fails. Moving intro out of entry-content makes the order check hold.
+
 - [ ] **Step 3: Lint the modified file**
 
 Run: `vendor/bin/phpcs page.php`
@@ -729,11 +734,19 @@ If nothing to commit, skip this step.
 | `page.php` renders intro partial between hero and body when `intro` is set | Task 3 |
 | New `views/partials/page-hero.css` for media-layer styles | Task 4 |
 | Playwright tests at desktop, 402px, 320px, 767px | Task 6 |
+| No-intro and no-asset fallback tests | Task 6 (added by final review fix) |
 | No new ACF blocks | Verified — none added |
 | Front page, single, archive, search, 404 unchanged | Verified — no template changes outside `page.php` and the partial |
 | Bottom dark block is the existing footer (not a new CTA) | Verified — no contact-block added |
 | `npm run build`, full Playwright, `composer lint` | Task 7 |
 
+**Production-template fixes applied by the Task 6 implementer (documented here so future readers don't reproduce the bugs):**
+
+| Defect the brief's assertions revealed | Fix | Why |
+| --- | --- | --- |
+| `expect(introBox.y).toBeLessThan(contentBox.y)` failed because the page-intro partial was rendered as a child of `<div class="entry-content">`, so the two bounding boxes shared the same top y. | `page.php` now loads the page-intro partial as a **sibling** of the `entry-content` div, not inside it. | Intro and body become peers in the layout flow, so the order check holds. |
+| The intro's `<div class="container mx-auto max-w-3xl content-wrapper">` produced an ~1184px wide intro on desktop (the `max-w-3xl` cap was overridden by `.container`'s `max-width: 80.5rem` from `styles/base/global.css`, which loads after the Tailwind utilities in the cascade). | `views/partials/page-intro.php` now uses `<div class="mx-auto max-w-3xl content-wrapper">` (no `container` class). | `max-w-3xl` (768px) is the only constraint, so the intro is correctly capped on desktop. |
+
 **Placeholder scan:** No TBD/TODO. Every step has exact code or commands. No "similar to Task N" references.
 
 **Type / interface consistency:**