fix(notes): keep the note stylesheet in the production bundle

[EtienneLescot]

Summary

The Notes window becomes unusable as soon as a long text is pasted into it: the note fills the whole window, the wheel does nothing, and every toolbar button leaves the screen for good.

Root cause is a build-time one, which is why it never showed in dev. NotesWindow.tsx imported its stylesheet for the side effect only:

import "./NotesWindow.module.css";

Rollup tree-shakes a binding-less CSS-module import out of the production bundle. dist/assets/*.css contained 0 .tiptap rules, while LaunchWindow.module.css (imported with a binding) was bundled normally. Vite injects module CSS at runtime in dev, so the dev server always looked correct.

Without height: 100% + overflow-y: auto, the note body stops being a scroll container and grows to its content height. Pasting puts the caret at the end, ProseMirror scrolls it into view, and the only scrollable ancestor left is the overflow: hidden shell — so the toolbar scrolls out of the viewport and the wheel cannot bring it back.

Every selector in the file was already :global(...), so the CSS module bought nothing. Renamed to a plain NotesWindow.css and dropped the wrappers; a plain CSS import is always emitted. This also restores the mirror transform, list markers, code blocks and heading sizes in the packaged app — all silently missing until now.

Related issue

Fixes #

Type of change

• Bug fix

Release impact

• Patch

Desktop impact

• Windows
• macOS
• Linux

Screenshots / video

Measured rather than eyeballed — 400x540 window (the Notes window default), ~5.8k characters pasted:

	before (shipped bundle)	after
editor height	6360 px (viewport 540)	412 px
editor scrollable	no	yes
toolbar position	y = -5913, off-screen	y = 19, visible
buttons hit-testable	0	13 / 13

Testing

• npx vite build then grep the emitted CSS: 0 .tiptap rules before, 30 after.
• Served the production bundle (vite preview) at ?showNotes=true, 400x540, pasted ~5.8k characters: editor stays 412 px with overflow-y: auto, scrollHeight 3600, shell scrollTop stays 0, both toolbar rows visible, all 13 buttons hit-testable.
• Reproduced the three reported symptoms in dev by neutralising the same rules, confirming the mechanism.
• vitest --run src/components/launch/ → 85 passed; tsc --noEmit clean; Biome clean.
• Two guards added in NotesWindow.test.tsx: the stylesheet must not be a CSS module, and .tiptap must keep height: 100% + overflow-y: auto.

Note for the release manager

Branched from main per the workflow doc. release/v1.9.0 is frozen at 1.9.0-rc.2 and carries the same bug, so this needs a manual cherry-pick onto the release branch if it should ship in 1.9.0.

Summary by CodeRabbit

• Bug Fixes
  • Improved note editor styling so content continues to fill the available height and scroll vertically as expected.
  • Ensured editor styles are applied consistently when displaying notes.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 5c7617be-4df5-4d52-b6a4-c9f1f992ba8c

📥 Commits

Reviewing files that changed from the base of the PR and between 1749d84 and 147ebc9.

📒 Files selected for processing (3)

• src/components/launch/NotesWindow.css
• src/components/launch/NotesWindow.test.tsx
• src/components/launch/NotesWindow.tsx

---

📝 Walkthrough

Walkthrough

NotesWindow now imports a global stylesheet. TipTap selectors use plain .tiptap syntax. Tests verify the stylesheet import and preserve full-height scrolling behavior.

Changes

NotesWindow global stylesheet

Layer / File(s)	Summary
Convert TipTap selectors to global CSS src/components/launch/NotesWindow.css	Replaces :global(.tiptap) selectors with plain .tiptap selectors without changing styling declarations.
Wire and validate the stylesheet src/components/launch/NotesWindow.tsx, src/components/launch/NotesWindow.test.tsx	Imports NotesWindow.css and tests the stylesheet import, height, and vertical scrolling rules.

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

Possibly related PRs

• getopenscreen/openscreen#43: Introduced the NotesWindow component and its styling.
• getopenscreen/openscreen#152: Added the related teleprompter implementation and TipTap styling.

Suggested reviewers: my-denia

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the production-bundle fix for the Notes stylesheet.
Description check	✅ Passed	The description covers the summary, change type, release impact, platform impact, screenshots, testing, and release notes; the issue reference remains blank.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/notes-stylesheet-missing-in-production

---

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.}