Late Atomic Wind CSS can override responsive desktop grid columns

[pirate-bot]

Summary

Atomic Wind sections configured with responsive multi-column layouts can render as a single vertical column on the frontend at desktop widths even though the editor shows the intended side-by-side layout. The responsive desktop column rule is expected to remain effective at its configured breakpoint, but a later generated stylesheet can leave the base single-column rule effective instead. This makes affected live-page sections appear to use their mobile layout on desktop.

Customer context

• Product / area: Otter AI, Atomic Wind Box responsive grid layout
• Version: Not provided; current released source inspected at v3.2.3
• Environment: WordPress frontend at desktop width; editor preview renders correctly
• Integration / third party: None reported
• Reported error / symptom: Responsive three- and four-column sections stack vertically on the live page
• Impact: Published desktop layout differs from the editor configuration

Reproduction notes

Reported workflow:

1. Create or edit an Otter AI page containing an Atomic Wind section configured as responsive horizontal columns.
2. Observe the section side by side in the block editor.
3. View the published page at desktop width.
4. Observe the cards stacked vertically.

Code-level reproduction inferred from the inspected path additionally requires another Atomic Wind post/template/embed stylesheet to be emitted after the singular stylesheet and to contain the same base grid utility. A browser reproduction was not executed because repository JavaScript dependencies are not installed. The customer site was not inspected, and the referenced recording was unavailable through HelpScout.

Diagnosis

Conclusion

The shipped CSS-loading path can place independently compiled full Atomic Wind stylesheets in both the document head and footer. Each stylesheet contains its own base and responsive utility ordering. When a later blob contains the base .grid-cols-1 utility, that equal-specificity rule can override an earlier md:grid-cols-3 or lg:grid-cols-4 rule on a block carrying both classes. The staff-observed later stylesheet override matches this code path. This is distinct from open issue #2940, which concerns Otter visibility-condition rules competing with Atomic Wind display utilities.

Where this likely occurs

• Frontend Atomic Wind cached-style loading: inc/plugins/class-atomic-wind-blocks.php — Atomic_Wind_Blocks::run() lines 60–83 registers singular CSS in the head and late CSS in the footer.
• Singular stylesheet output: inc/plugins/class-atomic-wind-blocks.php — Atomic_Wind_Blocks::output_singular_css() lines 315–340 emits the queried post's complete cached CSS through atomic-wind-tailwind.
• Late stylesheet output: inc/plugins/class-atomic-wind-blocks.php — Atomic_Wind_Blocks::output_late_css() lines 427–467 collects other complete cached CSS blobs and emits them later through atomic-wind-tailwind-late.
• CSS persistence: src/atomic-wind/style-builder/index.js — atomic-wind:css-ready listener lines 8–27 stores the complete generated stylesheet per post rather than only post-unique declarations.
• Frontend compilation: src/atomic-wind/tailwind/generator-frontend.js — createCompiler() and build() lines 46–75 compile all discovered class tokens into a full important-mode Tailwind stylesheet.
• Product patterns rely on base-plus-responsive utility combinations: inc/patterns/aw-icon-grid.php — returned pattern content line 12 includes grid-cols-2 with md:grid-cols-4 on the same Box.
• Git history: commit 6ea09d60 introduced collection of multiple independently cached post stylesheets and footer output; commit c928a90f separated singular CSS into the head while retaining hooked/embed CSS in the footer. Both first shipped in v3.2.1; the inspected release is v3.2.3.

Engineering notes

The defect requires more than one independently generated CSS blob to affect a request, such as singular Atomic Wind content plus Atomic Wind content rendered from another post, hooked layout, or embed. Within one compiled blob, Tailwind controls base and breakpoint ordering. Across blobs, the later stylesheet restarts that ordering, so source order can alter which utility wins at a desktop breakpoint. The editor uses a single active compiler/style element and therefore does not exercise the same multi-blob frontend path. The exact secondary content source on the reported site is unknown because customer-site inspection was excluded and the HelpScout attachment API returned no image.

Test coverage status

tests/test-atomic-wind-blocks.php includes coverage for collecting multiple cached blobs at lines 1285–1311, late footer output at lines 1355–1409, singular head output at lines 1434–1447, and head/footer deduplication at lines 1474–1495. These tests use unrelated placeholder selectors and do not validate cascade behavior when separate blobs contain overlapping base and responsive utilities. src/blocks/test/unit/patterns-smart.test.js line 148 parses a responsive grid class string but does not test frontend CSS output. No relevant browser coverage for responsive grid columns across multiple CSS blobs was found during inspection.

What to verify or explore next

• May be worth reproducing on v3.2.3 with a singular Box using grid grid-cols-1 lg:grid-cols-4 and separately rendered Atomic Wind content whose cached stylesheet also contains grid-cols-1.
• At desktop width, checking the computed grid-template-columns and matched-rule source order would confirm the inferred cascade.
• Comparing the same fixture on v3.2.0 and v3.2.1 would validate the identified regression boundary at runtime.
• The relevant PHP suite is tests/test-atomic-wind-blocks.php; a frontend viewport assertion belongs with the Atomic Wind Playwright coverage.

Unknowns / follow-up

• The ticket does not state the installed Otter version.
• The exact later Atomic Wind content source and generated CSS text from the reported page are unavailable.
• The screen recording mentioned in the ticket was not returned by the sanctioned HelpScout image tool.

Confidence

Confidence: 92/100

The transcript reports an editor/frontend mismatch and the staff inspection identifies a later generated stylesheet as the override. Shipped v3.2.3 code emits independently compiled Atomic Wind CSS blobs at different document positions, allowing a later base grid utility to override an earlier responsive grid utility; no existing issue for this column-layout behavior was found.

---

Source: HelpScout #3440847349
Generated by bug-report-triage (ID: bug-report-triage_6a9a96bd2aa153.74599679)