Skip to content

fix: stack shared sequences on mobile - #27

Merged
smiggleworth merged 1 commit into
mainfrom
fix/mobile-sequence-specificity
Jul 28, 2026
Merged

fix: stack shared sequences on mobile#27
smiggleworth merged 1 commit into
mainfrom
fix/mobile-sequence-specificity

Conversation

@smiggleworth

Copy link
Copy Markdown
Contributor

Summary

  • make the mobile sequence override match the specificity of 2/4/5-column desktop rules
  • apply the same correction to 2/3-node flow maps
  • add selector-specific regressions for both shared patterns

Validation

  • npm run check
  • 390x844 browser verification: four-stage sequence computes one 358px column, all items full width, page scroll width remains 390px
  • 390x844 browser verification: three-node flow computes one 358px column
  • 338/338 static routes generated; 32,501 API anchors verified

Copilot AI review requested due to automatic review settings July 28, 2026 20:10

Copilot AI left a comment

Copy link
Copy Markdown

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 fixes a mobile layout regression where multi-column “shared” grid patterns (sequences and flow maps) were not collapsing to a single column due to selector specificity mismatches against the desktop attribute-based rules.

Changes:

  • Increase mobile override specificity by targeting .sequence[data-columns] (instead of .sequence) and forcing a single-column minmax(0, 1fr) track.
  • Apply the same specificity correction to .flow-map__nodes[data-count] for 2/3-node flow maps.
  • Add CSS regression assertions to ensure both mobile overrides remain present in src/styles.css.

Reviewed changes

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

File Description
tests/docs-catalog.test.ts Adds regression checks asserting the mobile-specific selectors for .sequence[data-columns] and .flow-map__nodes[data-count] set a single-column grid track.
src/styles.css Updates mobile @media (max-width: 48rem) selectors to match attribute-selector specificity so mobile overrides reliably win over desktop multi-column rules.

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

@smiggleworth
smiggleworth merged commit bb87480 into main Jul 28, 2026
2 checks passed
@smiggleworth
smiggleworth deleted the fix/mobile-sequence-specificity branch July 28, 2026 20:13
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