fix(layout): rebuild .sf-equal as CSS multi-column, plus 4 quick-win fixes - #509
Merged
Merged
Conversation
…fixes - .sf-equal was a byte-for-byte duplicate of .sf-grid--fit (auto-fit grid). Rebuilt on real CSS multi-column (column-width/-count/-gap/-rule) so content actually flows between columns like a newspaper, instead of sitting in fixed grid cells. --sf-equal-min-col-2/-3/-4/-6 are replaced by a direct column-count per --2/--3/--4/--6 modifier; new --sf-equal-rule-width/-style/-color add an optional column-rule (off by default). (#502) - Print headings now get static pt sizes inside @media print instead of inheriting the viewport-relative fluid --sf-text-* scale, which has no reliable meaning on a print page box. (#498) - Add .sf-drop-shadow-s/-m/-l utility classes for the existing --sf-drop-shadow-* tokens, which had no consuming class. (#491) - Stamp dist bundle headers with a minifier-safe /*! ... */ MIT license banner instead of a plain comment that minifiers strip. (#482) - Generate a VS Code CSS Custom Data file (badges/css-custom-data.json) from the published API index so --sf-* tokens autocomplete with descriptions in-editor. (#362) Also updates the frozen full-api-audit snapshots and token-annotations.json descriptions that referenced the old .sf-equal grid behavior, and adds a CHANGELOG entry for the breaking .sf-equal change. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TEb3f55AdgmjtbG9RijeoZ
|
Warning Review limit reached
Next review available in: 22 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (7)
📝 WalkthroughWalkthroughReplaces ChangesEqual-columns rewrite, drop-shadow macros, print sizes, and tooling
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
PR Summary by QodoFix .sf-equal to use CSS multi-column flow + print/drop-shadow/vscode tooling
AI Description
Diagram
High-Level Assessment
Files changed (39)
|
Code Review by Qodo
Context used✅ Tickets:
🎫 Stamp dist bundles with an MIT license notice using a minifier-safe `/*!` header 🎫 .sf-equal is implemented as a grid duplicate — it was meant to be CSS multi-column flowing layout 🎫 Verify/fix heading sizes in print — still resolve via viewport-relative fluid clamps +1 more✅ Compliance rules (platform):
11 rules 1.
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
| const outputPath = resolveInsideRoot(output); | ||
| const flatTag = flat ? ' (flat)' : ''; | ||
| const header = `/* SLASHED v${VERSION} — ${path.basename(output)}${flatTag} */\n`; | ||
| const header = `/*! SLASHED v${VERSION} — ${path.basename(output)}${flatTag} | MIT License | github.com/codeslash-dev/SLASHED */\n`; |
There was a problem hiding this comment.
2. bundle.js stamp not /* slashed */ 📘 Rule violation § Compliance
The bundle header stamp generated by scripts/bundle.js is now /*! ... | MIT License | ... */, which does not match the exact /* SLASHED vX.Y.Z */ header format required for unminified badges/*.css bundles by the checklist. This can cause version-stamp checks that expect the exact legacy format to fail.
Agent Prompt
## Issue description
The bundler now emits a bang-comment MIT header, but compliance IDs 1353202/1353203 require the first non-empty line of unminified `badges/*.css` bundles to be exactly `/* SLASHED vX.Y.Z */`.
## Issue Context
This PR changed the header to a new format (`/*! SLASHED v${VERSION} — ... | MIT License | ... */`). If the compliance requirement still enforces the legacy exact header pattern, emitted bundles will be non-compliant.
## Fix Focus Areas
- scripts/bundle.js[161-161]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@configurator/src/components/panels/LayoutPanel.svelte`:
- Line 60: The derived value equalRuleWidth in LayoutPanel.svelte is parsed with
raw parseFloat and can become NaN from a malformed override; update this derived
binding to use the same guarded parsing approach as the other numeric values in
the component (for example, the parseRem-based pattern) so it falls back to a
safe default before reaching the slider.
In `@configurator/src/data/classes.generated.json`:
- Around line 977-1006: The generated description for the sf-drop-shadow-l/m/s
entries is being taken from a stylelint pragma instead of the intended
human-readable documentation. Fix the source comment/doc-comment handling in
core/macros.css or the gen-classes generation logic so the lint disable
directive is not captured as the description, and ensure the macro metadata
populates a real group value if applicable. Then regenerate
classes.generated.json from the corrected source so the configurator UI and docs
show the proper text.
In `@docs/api-index.md`:
- Around line 881-883: The API index is rendering the stylelint suppression note
instead of the actual drop-shadow utility description for the sf-drop-shadow
macros. Update the doc generation path or the source class doc comment for the
.sf-drop-shadow-s, .sf-drop-shadow-m, and .sf-drop-shadow-l entries so they
resolve to the intended filter: var(--sf-drop-shadow-*) utility text rather than
the stylelint-disable-next-line note.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: e340a6f0-2feb-4e7e-beda-3c68632c937c
📒 Files selected for processing (39)
CHANGELOG.mdCLAUDE.mdREADME.mdbadges/badge-optimal.jsonbadges/css-custom-data.jsonconfigurator/src/components/panels/LayoutPanel.svelteconfigurator/src/data/api-index.generated.jsonconfigurator/src/data/classes.generated.jsonconfigurator/src/data/token-registry.generated.jsoncore/layout.csscore/macros.csscore/print.csscore/tokens.layout.cssdemos/full-api-demo-with-overrides.htmldemos/full-api-demo.htmldemos/generate.mjsdemos/ultimate-override.cssdocs/api-index.jsondocs/api-index.mddocs/classes.mddocs/layout.mddocs/llm-guide.mddocs/macros.mddocs/registry.jsondocs/test-coverage-6-token-reference.htmldocs/token-annotations.jsondocs/token-index.jsondocs/token-index.mddocs/tokens.mdpackage.jsonreports/full-api-audit/results/reachable-ui.jsonreports/full-api-audit/results/tokens-report.jsonscripts/bundle.jsscripts/gen-vscode-custom-data.jstests/layout.spec.jstests/macros.spec.jstests/print.spec.jstests/token-api.snapshot.jsontoken-registry.json
#510 (light-mode dark: classes) and this PR (rebuild .sf-equal, drop --sf-equal-min-col-2/3/4/6) both touched the Equal grid panel section. Kept this PR's replacement (the tokens the old per-column sliders wrote to no longer exist in core CSS) and added the missing dark: pairing to the new helper text to match the rest of the panel's light-mode styling.
- Add "equal-rule" to the layout DOMAIN_PATTERNS bucket so --sf-equal-rule-width/-style aren't flagged as uncategorised knobs (curation.test.js CI failure; -color already matched the colors bucket). - Guard equalRuleWidth with the existing parseRem NaN-safe parser instead of raw parseFloat, matching every other derived value in this panel (CodeRabbit). - Add a real doc comment above .sf-drop-shadow-s/-m/-l in core/macros.css: the generator's "nearest preceding comment" heuristic had latched onto an unrelated stylelint-disable note ~260 lines earlier, so the generated api-index/classes description was that pragma text instead of a real description (CodeRabbit). - Add badges/css-custom-data.json to scripts/artifacts.json's tracked outputs so the new docs:vscode-data step is covered by artifact drift-checking (Qodo). - Expose --sf-equal-rule-style and --sf-equal-rule-color in the configurator's Equal columns panel, matching the existing divider-style/divider-color pattern — only rule-width had a control (Qodo). The bang-comment dist bundle header (/*! SLASHED vX.Y.Z ... */) is the intended change and is already documented in CLAUDE.md; the bot flag citing the old exact-format checklist is stale, not acted on.
This was referenced Jul 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Rebuilt on real CSS multi-column (column-width/-count/-gap/-rule) so
content actually flows between columns like a newspaper, instead of
sitting in fixed grid cells. --sf-equal-min-col-2/-3/-4/-6 are replaced
by a direct column-count per --2/--3/--4/--6 modifier; new
--sf-equal-rule-width/-style/-color add an optional column-rule
(off by default). (.sf-equal is implemented as a grid duplicate — it was meant to be CSS multi-column flowing layout #502)
inheriting the viewport-relative fluid --sf-text-* scale, which has no
reliable meaning on a print page box. (Verify/fix heading sizes in print — still resolve via viewport-relative fluid clamps #498)
--sf-drop-shadow-* tokens, which had no consuming class. (Add .sf-drop-shadow-* utility classes #491)
banner instead of a plain comment that minifiers strip. (Stamp dist bundles with an MIT license notice using a minifier-safe
/*!header #482)from the published API index so --sf-* tokens autocomplete with
descriptions in-editor. (Tooling: ship VS Code CSS custom-data for
--sf-*tokens #362)Also updates the frozen full-api-audit snapshots and token-annotations.json
descriptions that referenced the old .sf-equal grid behavior, and adds a
CHANGELOG entry for the breaking .sf-equal change.
Co-Authored-By: Claude Sonnet 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01TEb3f55AdgmjtbG9RijeoZ
Summary by CodeRabbit
New Features
.sf-equalnow supports flowing multi-column layouts with optional column rules.Bug Fixes
Chores