@awesomate/hosting-mcp 0.22.2 → 0.22.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awesomate/hosting-mcp",
-  "version": "0.22.2",
+  "version": "0.22.3",
   "description": "Awesomate MCP server — lets Claude manage your Awesomate WordPress hosting, plan, limits, n8n automations, and build Node/static apps + databases",
   "license": "UNLICENSED",
   "type": "module",

package/skill/awesomate-hosting/SKILL.md

@@ -313,7 +313,7 @@ scripts/deploy.sh --from ~/Studio/mysite --domain mysite.awesomate.site --with-d
 Never deploy without confirming with the user first, and always report the
 snapshot id and the verified live status.
 
-**"Verified live status" means a real browser at 390px and 1440px, not a 200 from curl.**
+**"Verified live status" means a real browser at 390, 768, 844×390, 1024 and 1440px, not a 200 from curl** — the in-between widths are where a header wraps and only the owner's iPad notices.
 Run the checklist in `references/wordpress-launch-checks.md` — full-bleed sections, gutters,
 logo and favicon present, fonts loaded, no broken images, a real 404 — before saying done. Every
 item on it was reported by a site owner after an agent had already said done.

package/skill/awesomate-hosting/references/wordpress-launch-checks.md

@@ -92,9 +92,40 @@ theme's `Version:` header (`style.css`). A new file is not seen until that key c
 file. Verified: the same deploy with `0.1.0 → 0.2.0` registered the patterns instantly. Treat the
 version bump as part of the deploy, not a release ceremony.
 
+## 6. The header wraps between 600px and ~1000px (iPad, phone in landscape)
+
+**Symptom:** the owner says the margins are "bad again" on an iPad or a phone turned sideways, but
+every band measures full-bleed. What they are seeing is the **header**: logo and nav links on one
+row, the buttons dropped to a second row on the left, and a slab of white under them.
+
+**Cause:** core's navigation block collapses to the hamburger only below **600px**. Between 600 and
+roughly 1000px the logo, the links and the header buttons all try to share one flex row, and the
+row wraps. It looks fine on a phone (collapsed) and on a desktop (fits), which is exactly why phone
+and desktop checks both pass while the owner's iPad does not.
+
+**Fix (theme CSS, the block has no breakpoint setting):**
+```css
+.site-header .nav-row { flex-wrap: nowrap; }
+@media (max-width: 1023px) {
+  .site-header .wp-block-navigation { order: 3; }                                  /* hamburger last */
+  .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
+  .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
+}
+```
+Two faults travel with it at the same widths: core stacks **columns to a single column below
+782px**, so a three-card row becomes a tower on an iPad in portrait (make 3+ column rows two-up
+between 600 and 781 with `display:grid` on `.wp-block-columns:has(> .wp-block-column:nth-child(3))`);
+and a **fixed 96px section padding** is half the screen on a landscape phone — make the section
+spacing preset fluid, e.g. `clamp(64px, 6.7vw, 96px)`.
+
+**Verify at 390, 600, 768, 844×390, 1024 and 1440** — never just phone and desktop. The header
+test: the logo and the primary button share a row (their `getBoundingClientRect().top` differ by
+less than 24px), the hamburger is visible up to 1023 and the links from 1024.
+
 ## The launch checklist
 
-Run in a real browser against the LIVE domain, at 390 and 1440, before reporting done:
+Run in a real browser against the LIVE domain at **390, 768, 844×390, 1024 and 1440** — the in-between
+widths are where headers wrap — before reporting done:
 
 1. Every coloured section is full-bleed (`getBoundingClientRect().left <= 1`) with text inset ≥16px.
 2. No horizontal overflow (`documentElement.scrollWidth <= clientWidth + 1`).
@@ -104,5 +135,6 @@ Run in a real browser against the LIVE domain, at 390 and 1440, before reporting
 6. A nonsense URL returns **404** with the theme's 404 template, not a 200 page.
 7. Section order matches the design (read the `h1,h2` sequence), and neither nav nor decorative
    marks appear inside page content.
-8. If the deploy added pattern files, the theme `Version:` was bumped and every `wp:pattern`
+8. The header is one row at every width above, with the hamburger up to 1023 and the links from 1024.
+9. If the deploy added pattern files, the theme `Version:` was bumped and every `wp:pattern`
    in the parts actually rendered (an unregistered slug renders as empty, silently).