Skip to content

fix: repair responsive container contracts - #11

Merged
Foscat merged 1 commit into
mainfrom
fix/responsive-layout-contract-2.1.1
Jul 27, 2026
Merged

fix: repair responsive container contracts#11
Foscat merged 1 commit into
mainfrom
fix/responsive-layout-contract-2.1.1

Conversation

@Foscat

@Foscat Foscat commented Jul 27, 2026

Copy link
Copy Markdown
Owner

What changed

  • make personality enhancements respond to the nearest inline-size container
  • defer three- and four-track app-shell signatures until their local allocation reaches 64rem
  • preserve safe two-track thresholds and existing medium-width rhythms
  • give Docs a distinct wide two-column geometry while retaining Dashboard's three-column shell
  • update authored CSS, generated distributions, package/version surfaces, changelog, documentation, and release contracts for 2.1.1
  • add root-wide/local-container browser coverage at 47rem, 49rem, 63rem, and 65rem across every personality

Root cause

Personality queries were bound to the full ly-personality root, so narrow nested allocations activated wide shell tracks. Dashboard and Docs also shared their wide geometry, making the two recipes visually indistinguishable.

Compatibility

This is a behavioral patch. It removes no selectors, tokens, data hooks, or structural APIs, and preserves DOM and keyboard order.

Verification

  • npm.cmd run release:verify
  • Stylelint and static documentation contracts
  • Chromium, Firefox, and WebKit rendered suites
  • package audit with zero vulnerabilities
  • npm pack and publish dry-runs
  • exact package candidate exercised by Interface Systems Lab across seven viewport widths

Copilot AI review requested due to automatic review settings July 27, 2026 10:54
@Foscat Foscat self-assigned this Jul 27, 2026
@Foscat Foscat added bug Something isn't working enhancement New feature or request labels Jul 27, 2026
@Foscat
Foscat merged commit 6e642ce into main Jul 27, 2026
11 checks passed

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

This PR delivers a 2.1.1 behavioral patch to ensure personality/container-query-driven responsive layouts react to the nearest inline-size container (fixing nested allocation breakpoints), while preserving established two-track thresholds and differentiating Docs vs Dashboard wide shells.

Changes:

  • Re-scopes personality container queries from @container ly-personality … to unnamed @container (min-width: …) queries, and gates 3-/4-track app-shell signatures behind a safe 64rem local allocation.
  • Updates the Docs recipe to a distinct wide (64rem) two-column navigation + stacked content shell (Dashboard remains three-column).
  • Bumps release surface to 2.1.1 (package versions, docs, workflows, changelog) and extends static + Playwright smoke contracts for the new responsive behavior.

Reviewed changes

Copilot reviewed 35 out of 56 changed files in this pull request and generated no comments.

Show a summary per file
File Description
test/release-docs-contract.test.mjs Updates release-contract assertions to 2.1.1 references.
test/pages-artifact.test.mjs Updates Pages artifact expectations for version/date metadata.
test/layout-css-contract.test.mjs Strengthens static CSS contracts for nearest-container queries and safe shell thresholds; validates Docs wide geometry.
test/demo-smoke.test.mjs Adds Playwright coverage for wide-root + local-container behavior across personalities and thresholds.
styles/recipes.css Gives Docs a distinct wide (64rem) two-column shell; Dashboard remains three-column.
styles/personalities/z-pattern.css Switches to nearest-container queries; defers 3-track shell to 64rem local allocation.
styles/personalities/y2k.css Switches to nearest-container queries; defers 3-track shell to 64rem local allocation.
styles/personalities/tactile.css Switches to nearest-container query while preserving safe 2-track threshold.
styles/personalities/synthwave.css Switches to nearest-container queries while preserving 64rem shell behavior.
styles/personalities/split-screen.css Switches to nearest-container query while preserving safe 2-track threshold.
styles/personalities/retrofuturism.css Switches to nearest-container queries; defers 3-track shell to 64rem local allocation.
styles/personalities/retro-glass.css Switches to nearest-container queries; defers 3-track shell to 64rem local allocation.
styles/personalities/neumorphism.css Switches to nearest-container queries while preserving safe 2-track threshold.
styles/personalities/mondrian.css Switches to nearest-container queries; defers 3-track shell to 64rem local allocation.
styles/personalities/minimal-saas.css Switches to nearest-container queries; defers 3-track shell to 64rem local allocation.
styles/personalities/maximalist.css Switches to nearest-container queries; defers 4-track shell to 64rem local allocation.
styles/personalities/f-pattern.css Switches to nearest-container queries; defers 3-track shell to 64rem local allocation.
styles/personalities/cyberpunk.css Switches to nearest-container queries; defers 3-track shell to 64rem local allocation.
styles/personalities/brutalism.css Switches to nearest-container queries; defers 3-track shell to 64rem local allocation.
styles/personalities/bento.css Switches to nearest-container queries; defers 3-track shell to 64rem local allocation.
styles/personalities/bauhaus.css Switches to nearest-container queries; defers 4-track shell to 64rem local allocation.
README.md Updates version pinning and clarifies nearest-container + safe-shell threshold behavior.
package.json Bumps package version to 2.1.1.
package-lock.json Bumps lockfile package version and refreshes patched dev dependencies.
docs/wiki/UI-Style-Kit-Compatibility.md Updates documented Layout Style CSS fixture version to 2.1.1.
docs/wiki/Release-And-Publishing.md Updates release checklist/version contract to 2.1.1.
docs/wiki/Migrating-To-2.0.md Updates install example to 2.1.1.
docs/wiki/Layout-Styles.md Documents nearest-container personality behavior and 64rem feasibility gates.
docs/wiki/Layout-Recipes.md Documents Docs vs Dashboard wide-shell differences at 64rem.
docs/wiki/Installation-And-CDN.md Updates npm/CDN examples to 2.1.1.
docs/wiki/Home.md Updates wiki home version and summary bullets for nearest-container behavior.
docs/wiki/Getting-Started.md Updates install example to 2.1.1.
dist/recipes.css Regenerates distribution with Docs wide-shell geometry change.
dist/personalities/z-pattern.css Regenerates distribution with nearest-container queries + 64rem shell gate.
dist/personalities/y2k.css Regenerates distribution with nearest-container queries + 64rem shell gate.
dist/personalities/tactile.css Regenerates distribution with nearest-container query.
dist/personalities/synthwave.css Regenerates distribution with nearest-container queries.
dist/personalities/split-screen.css Regenerates distribution with nearest-container query.
dist/personalities/retrofuturism.css Regenerates distribution with nearest-container queries + 64rem shell gate.
dist/personalities/retro-glass.css Regenerates distribution with nearest-container queries + 64rem shell gate.
dist/personalities/neumorphism.css Regenerates distribution with nearest-container queries.
dist/personalities/mondrian.css Regenerates distribution with nearest-container queries + 64rem shell gate.
dist/personalities/minimal-saas.css Regenerates distribution with nearest-container queries + 64rem shell gate.
dist/personalities/maximalist.css Regenerates distribution with nearest-container queries + 64rem shell gate.
dist/personalities/f-pattern.css Regenerates distribution with nearest-container queries + 64rem shell gate.
dist/personalities/cyberpunk.css Regenerates distribution with nearest-container queries + 64rem shell gate.
dist/personalities/brutalism.css Regenerates distribution with nearest-container queries + 64rem shell gate.
dist/personalities/bento.css Regenerates distribution with nearest-container queries + 64rem shell gate.
dist/personalities/bauhaus.css Regenerates distribution with nearest-container queries + 64rem shell gate.
dist/legacy.css Regenerates legacy distribution to match new nearest-container + 64rem gating behavior.
dist/layout-style-css.min.css Regenerates minified bundle for 2.1.1 behavior and recipe/personality changes.
dist/layout-style-css.css Regenerates flattened bundle for 2.1.1 behavior and recipe/personality changes.
demo/sitemap.xml Updates demo sitemap lastmod for the 2.1.1 release date.
demo/index.html Updates demo structured metadata version to 2.1.1.
CHANGELOG.md Adds 2.1.1 release entry describing fixes, tests, and lockfile security refresh.
.github/workflows/npm-publish.yml Updates workflow dispatch help text to v2.1.1 example tag.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants