Skip to content

fix: harden responsive layout integration - #4

Merged
Foscat merged 2 commits into
mainfrom
fix/layout-style-2.1.1-integration
Jul 27, 2026
Merged

fix: harden responsive layout integration#4
Foscat merged 2 commits into
mainfrom
fix/layout-style-2.1.1-integration

Conversation

@Foscat

@Foscat Foscat commented Jul 27, 2026

Copy link
Copy Markdown
Collaborator

What changed

  • wrap the split, two-pane, three-pane, and media specimens in local inline-size containment scopes
  • document why the queried primitive must be nested beneath the boundary
  • keep Reel's horizontal overflow intentional while making the specimen keyboard-accessible and explicitly scrollable
  • pin the published layout-style-css@2.1.1 package and align install, CDN, fixture, metadata, and export contracts
  • add direct overflow, zero-width track, local-allocation, recipe-divergence, and runtime-error coverage at 390, 768, 900, 992, 1024, 1240, and 1968 pixels
  • replace the vulnerable preview-server dependency with a repository-owned static preview server and refresh patched Next/PostCSS/Sharp tooling

Root cause

Container-responsive primitives had no parent containment boundary matching their allocated atlas cell. A queried element cannot establish and query its own inline-size containment context.

Verification

  • npm.cmd run quality
  • 32 unit tests
  • 10 fixture tests
  • 9 export tests
  • 118 Playwright tests with tagged Chromium, Firefox, and WebKit coverage
  • production dependency audit with zero vulnerabilities
  • git diff --check

The full npm audit retains nine dev-only findings in Next's bundled ESLint/minimatch chain; npm's proposed remediation is a breaking ESLint 10 upgrade, and the compatible lint configuration remains green.

Copilot AI review requested due to automatic review settings July 27, 2026 11:10

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Hardens the layout laboratory’s container-responsive specimens by ensuring they query within an appropriate inline-size containment boundary, while also aligning published dependency versions and replacing the external preview server used for Playwright runs.

Changes:

  • Wrap split/two-pane/three-pane/media specimens in a local container-type: inline-size scope and document the container-query constraint.
  • Replace the serve-based Playwright preview server with a repository-owned static preview server and update Playwright webServer command accordingly.
  • Pin layout-style-css@2.1.1 everywhere (fixtures, docs, ecosystem metadata, and tests) and expand browser coverage for responsive/overflow/runtime-error assertions across multiple viewports.

Reviewed changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
tests/fixtures.test.mjs Updates expected fixture asset paths and versions for layout-style-css@2.1.1.
tests/export.test.mjs Aligns structured data + exported asset expectations with layout-style-css@2.1.1.
tests/ecosystem.test.ts Updates pinned install/CDN strings and registry ordering to include layout-style-css@2.1.1.
tests/browser/site.spec.ts Updates metadata/version assertions for layout-style-css@2.1.1.
tests/browser/capabilities.spec.ts Adds containment boundary checks, Reel accessibility/scroll assertions, viewport matrix expansion, and runtime error capture.
scripts/verify-export.mjs Aligns structured data verification with layout-style-css@2.1.1.
scripts/serve-preview.mjs Adds a repository-owned static preview server for Playwright’s webServer.
scripts/build-fixtures.mjs Updates fixture build contracts and expected asset targets to layout-style-css@2.1.1.
README.md Updates pinned install/CDN examples and package table version to layout-style-css@2.1.1.
playwright.config.ts Switches Playwright webServer command to use the new preview server script.
package.json Pins layout-style-css@2.1.1, updates Next/eslint tooling, removes serve, and adds preview:serve.
package-lock.json Lockfile refresh for dependency updates (Next/PostCSS/Sharp/etc.) and removal of serve.
app/styles/labs.css Introduces .primitive-query-scope containment boundary styling and documents why it’s needed.
app/data/ecosystem.ts Updates ecosystem package version + pinned install/CDN links for layout-style-css@2.1.1.
app/components/labs/LayoutLab.tsx Wraps container-responsive primitives in .primitive-query-scope and adds Reel accessibility attributes.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread scripts/serve-preview.mjs Outdated
Comment on lines +105 to +106

createReadStream(filePath).pipe(response);

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in d639087. File streams now register the error handler before the open event, return a controlled 500 when opening fails, and close an already-started response without leaving an unhandled stream error. Added a real HTTP regression test that issues two failing reads and verifies the server remains available.

@Foscat
Foscat merged commit ba8ccf3 into main Jul 27, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants