@ammduncan/easel 0.2.22 → 0.2.23

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to easel. This project adheres to [Semantic Versioning](https://semver.org/).
 
+## 0.2.23 — 2026-05-23
+
+### Changed
+- **`.full-bleed` now caps at 1440px and centres.** On a wide monitor the card itself can be ~2000px, and a full-bleed mockup was stretching to fill all of it — but a real desktop screen tops out around 1440px, so the mockup looked unnaturally wide. `.full-bleed` is now `width: min(100vw, 1440px)` (still centred via `left:50%` + `translateX(-50%)`): it fills the card up to 1440 then centres with gutters. On cards narrower than 1440 it still fills edge-to-edge. Browser-verified at a 1949px viewport (1542px card → mockup capped at 1440, centred).
+
 ## 0.2.22 — 2026-05-23
 
 ### Changed

package/dist/client/viewer.js

@@ -718,12 +718,16 @@ body > .wrap > h1, body > .wrap > h2, body > .wrap > h3, body > .wrap > h4 {
 body > *:first-child { margin-top: 0 !important; }
 body > *:last-child { margin-bottom: 0 !important; }
 /* Full-bleed escape hatch for embedded mockups mid-presentation. Wrap a
-   section in <div class="full-bleed"> and it spans the full card width,
-   breaking out of the body padding + 1400px prose max-width, while the prose
-   around it stays in the comfortable reading column. Inside the iframe, 100vw
-   === the card's width; left:50% + translateX(-50%) re-centres on the card. */
+   section in <div class="full-bleed"> and it breaks out of the body padding +
+   prose max-width to span the card, while the prose around it stays in the
+   reading column. Inside the iframe, 100vw === the card's width; left:50% +
+   translateX(-50%) re-centres on the card.
+   Capped at 1440px: on a wide monitor the card itself can be ~2000px, but a
+   real desktop screen tops out around 1440 — letting a mockup stretch past
+   that looks unnaturally wide. So full-bleed fills the card up to 1440 and
+   then centres, rather than growing without limit. */
 .full-bleed {
-  width: 100vw;
+  width: min(100vw, 1440px);
   position: relative;
   left: 50%;
   transform: translateX(-50%);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ammduncan/easel",
-  "version": "0.2.22",
+  "version": "0.2.23",
   "description": "A live browser tab for every Claude Code (and MCP) session. The push MCP tool appends HTML cards to a scrolling feed you keep open in split-screen.",
   "type": "module",
   "license": "MIT",