Skip to content

Keep height floors on responsive canvas sections#652

Merged
chubes4 merged 1 commit into
trunkfrom
fix/canvas-section-responsive-collapse
Jul 21, 2026
Merged

Keep height floors on responsive canvas sections#652
chubes4 merged 1 commit into
trunkfrom
fix/canvas-section-responsive-collapse

Conversation

@chubes4

@chubes4 chubes4 commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

Summary

Desktop-only Figma exports frequently contain canvas-positioned sections: fixed-height frames without auto-layout whose children are all absolutely positioned. The desktop-only responsive fallback relaxed those sections to height:auto at viewports below the canvas width, but skipped the min-height floor whenever the section had a container child — assuming flow children would size the box. Canvas children are out of flow, so the sections collapsed to zero height and entire page regions (hero, about, testimonials, CTA bands) vanished at any viewport under the design canvas.

Change

In BreakpointMediaDiffBuilder::desktopOnlyResponsiveFallbackDeclarations, a container whose base display is not flex/grid is treated as canvas-positioned and always keeps the capped source-height floor (min-height:min(height, 720px)) alongside height:auto. Flex/grid containers keep the existing behavior.

Measured impact

Twenty Twenty-Five (Community) .fig front page at a 1280px viewport:

  • Before: page rendered 1497px tall — hero (453px), about (732px), testimonials (733px), and CTA (460px) bands all collapsed to zero height; only the two min-height grid sections survived.
  • After: all four bands render with floors (453px / 720px / 720px / 460px) and the page renders ~3850px.
  • End-to-end Figma-to-WordPress visual mismatch for that fixture dropped from 28.73% to 20.90% while the compared region grew 2.4x (the comparison now covers the whole restored page).
  • FSE Pilot Build Theme and Fisiostetic fixtures: no regression (16.54% / 32.03% respectively, both within noise of their prior scores), and the editor gate stayed fully green across all three (727/727 native blocks, 365/365 browser-validated blocks, zero invalid).

How to test

  1. cd figma-transformer && composer test — the contract suite includes a new desktop-only canvas-sections fixture asserting height:auto plus min-height:453px / min-height:720px / min-height:460px in the @media (max-width:1439px) block for hero/about/CTA bands whose only children are absolutely positioned.
  2. Existing desktop-only flex-row assertions (desktop-only-responsive-hero-row-has-no-fixed-min-height-floor...) still pass, proving flex/grid containers keep the floor-free stacking behavior.

AI disclosure

Implemented with OpenCode using openai/gpt-5.6-sol; the contract suite and the end-to-end fixture matrix were run locally.

@chubes4
chubes4 merged commit 2e33a17 into trunk Jul 21, 2026
1 check passed
@chubes4
chubes4 deleted the fix/canvas-section-responsive-collapse branch July 21, 2026 13:47
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