fix(web): remove universal sibling selectors that block row windowing

[ssk090]

Description

Summary

This PR removes the 5 in-repo CSS rules from #9892 that end in a universal selector after a sibling combinator (x + *). Computed styles do not change.

• packages/editor/src/styles/table.css: .ProseMirror-widget + * is now .ProseMirror-widget + :is(p, h1, h2, h3, h4, h5, h6, pre, [data-type="horizontalRule"], .editor-callout-component). It still sets only padding-top: 0 !important on the block right after the table drag-handle widget.
• apps/web/styles/typography.config.ts (new, loaded with @config): it sets the typography plugin keys hr + *, h2 + *, h3 + * and h4 + * to null, so the plugin does not emit them. It adds one keyed rule, :is(hr, h2, h3, h4) + :is(p, blockquote, ul, ol, dl, pre, table, img, video, hr, h2, h3, h4, .editor-callout-component), with the same margin-top: 0. The plugin still wraps this rule in .prose :where(...), so its specificity does not change.
• apps/web/styles/globals.css: one line, @config "./typography.config.ts";, after the existing @plugin "@tailwindcss/typography";.

Why

See #9892. When a stylesheet has a rule that ends in + * or ~ *, Chromium restyles the following siblings and their subtrees on each child insert or remove. A windowed list or table inserts and removes rows on every scroll step, so it pays this cost on every frame. Selectors with element or class keys do not have this problem.

Remaining

4 rules are left. They come from @makeplane/propel 0.7.3, which is an external package. Its source is not in this repo:

• pill: [&>*:not(span)~*]:-ms-px and [&>*:not(span)~*]:rounded-s-none
• split-button: [&>*+*]:rounded-s-none and [&>*+*]:border-s-0

The Plane team must fix these in propel. That is why this PR uses "Refs" and not "Fixes". This PR does not add row windowing.

Notes

No visual change is intended. I made the keyed lists from the elements whose computed style the old rules actually changed. I checked this in a browser (see below). Elements that are not in the lists already get the same value from other rules, for example margin: 0 !important on editor paragraphs and headings. If the editor adds a new block type with its own top padding or margin, it may need to be added to these lists.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• Performance improvements

Test Scenarios

Verification

• pnpm turbo run build --filter=web passes on preview and on this branch.
• I parsed the compiled globals-*.css with postcss and counted the rules whose selector matches [+~]\s*\*:
  • preview: 6 rules (9 complex selectors). These are typography (4 selectors in one rule), propel (4 rules), and .ProseMirror-widget + *.
  • this branch: 4 rules. All 4 are the propel rules listed above.
• Computed style check: I made an HTML fixture that copies the editor DOM. It has every block type after p, h1 to h6, hr, the horizontal rule div, blockquote, a list, a code block and a callout. It also has table cells with 0, 1 and 2 drag-handle widgets before each block type, and not-prose cases. I rendered it in headless Chrome inside the large/regular, small and mobile editor-container variants. For each of the 12,069 elements, I compared margins, paddings, border, display, font size, line height and the box position and height. The production CSS from preview and from this branch gives 0 differences. As a control, when I only remove the old rules, the check finds differences (for example blockquote and callout after a heading, and paragraphs, headings, the hr div and callouts after a table widget).
• oxfmt --check passes on the 3 changed files. oxlint passes. The repo .oxlintrc.json ignores *.config.ts.
• pnpm --filter web check:types (react-router typegen and tsc --noEmit) passes.
• I did not measure fps.

References

Refs #9892

Summary by CodeRabbit

• Style
  • Improved spacing between headings, horizontal rules, and following content, including paragraphs, lists, tables, media, and editor callouts.
  • Refined spacing around editor drag handles so supported content blocks retain consistent padding.

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 9968b5ad-ee7e-4a9f-8e82-1d374c9db0b5

---

📥 Commits

Reviewing files that changed from the base of the PR and between bab49bb and 0e445e2.

---

📒 Files selected for processing (3)

• apps/web/styles/globals.css
• apps/web/styles/typography.config.ts
• packages/editor/src/styles/table.css

---

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

---

📝 Walkthrough

Walkthrough

The web stylesheet now loads its typography configuration. The configuration limits heading and horizontal-rule margin resets to specified following elements. The editor stylesheet limits its widget-adjacent padding rule to specified block types and editor callouts.

Changes

Typography and editor spacing

Layer / File(s)	Summary
Web typography selectors apps/web/styles/typography.config.ts, apps/web/styles/globals.css	The typography configuration limits margin resets after hr, h2, h3, and h4 to specified following elements. The global stylesheet loads the configuration through Tailwind’s @config directive.
Editor widget spacing packages/editor/src/styles/table.css	The adjacent-sibling padding rule applies only to paragraphs, headings, pre, horizontal rules, and editor callouts after ProseMirror widgets.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

---

Merge Risk: ⚪ Minimal · up to 0e445

No actionable issue is established in the selector changes. Merge after normal checks.

Pre-merge checks | 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check		The title clearly and concisely describes the main change: removing universal sibling selectors that affect row windowing performance.
Description check		The description is complete and relevant. It explains the changes, motivation, scope, remaining external rules, type of change, detailed verification results, and reference to issue #9892. Screenshots…
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

---

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

---

_{Comment @coderabbitai help to get the list of available commands.}