Skip to content

Stop hidden wall examples from mounting below their breakpoints - #63

Open
Floating-Y wants to merge 1 commit into
deeplethe:devfrom
Floating-Y:fix/wall-responsive-mounting
Open

Floating-Y wants to merge 1 commit into
deeplethe:devfrom
Floating-Y:fix/wall-responsive-mounting

Conversation

@Floating-Y

Copy link
Copy Markdown
Contributor

Why

Below md, the wall still mounted 14 examples in CSS-hidden columns. Their initialization and effects continued, including the elapsed timer in Run → TurnStatus → useElapsed. This affected both the home page and Create preview 02.

What changes

  • Mount columns two, three and four only when their existing CSS breakpoints match: 48rem, 64rem and 1400px. Keep the first column, CSS classes, example order and full behavior.
  • Reuse useMediaQuery and read its initial match synchronously, so the first desktop commit already has the correct columns. Keep its existing change subscription and cleanup.
  • Add scripts/check-wall.html, a browser behavior check using real iframe viewports, React and native timers; no new dependencies.

Tradeoff: narrowing the window unmounts the affected columns. Widening it again remounts them with fresh local demo state, including form values and elapsed clocks. No state persistence is added; the first column stays mounted.

How it was checked

  • The browser check fails against the original implementation at 390px (four columns mounted instead of one), then passes with this change. It covers 767/768, 1023/1024 and 1399/1400px, widening and narrowing, both full values, and the first desktop commit.
  • Timer assertions under StrictMode confirm that a narrow initial mount creates only the first-column clock, mounting Run adds its clock, narrowing removes it, the first column keeps its DOM/input/clock and continues ticking, and unmount clears all intervals.
  • Inspected production-build home and /create?welcome=0 preview 02 at 390px and 1600px in dark and light themes; checked the open team menu and theme switching.
  • Checked the existing drawer-dialog caller at 390px and 1600px in both themes, including the open Drawer and Dialog.
  • /dev/examples: 389/389 mounted, 0 failed in each theme.
  • Linux Docker, Node 24.21.0: fresh npm ci, node --test scripts/block-metadata.test.mjs (8 passed), npm run docs, npm run typecheck and npm run build passed. The generated registry matched the committed registry; git diff --exit-code registry.json and git diff --check passed.

Windows Node 22.15.0 also passed installation, the eight metadata tests and type checking. Native npm run docs and npm run build stop at the existing CRLF heading parser error in scripts/build-docs.mjs:141. The Linux validation used a temporary copy with MDX checkout line endings normalized to LF; no documentation tooling changes are included.

Before review

  • Every commit is signed off (git commit -s)
  • Type checking and the production build pass in Linux
  • /dev/examples reports 0 failed
  • Both Wall callers and the shared hook's existing caller were inspected in both themes, open states included

Signed-off-by: danwood <118035379+Floating-Y@users.noreply.github.com>

This branch has not been deployed

No deployments
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.

1 participant