fix(EAV-476): bring back prompter scrollbar styling

[ianshade]

About the Contributor

This pull request is posted on behalf of TV 2 Norge.

Type of Contribution

This is a:

Bug fix

Current Behavior

Scrollbar styling on the Prompter View is lost - it is a dark scrollbar, but misses the styling that can be see e.g. in the docs https://sofie-automation.github.io/sofie-core/docs/user-guide/features/prompter/

New Behavior

Styling is brought back by applying the classes in correct place.

Testing

• I have added one or more unit tests for this PR
• I have updated the relevant unit tests
• No unit test changes are needed for this PR

Affected areas

Prompter View

Time Frame

Other Information

The regression likely happened when bootstrap was introduced

Status

• PR is ready to be reviewed.
• The functionality has been tested by the author.
• Relevant unit tests has been added / updated.
• Relevant documentation (code comments, system documentation) has been added / updated.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ce3e5de1-eb3a-4457-a90c-c33d2f4188c4

📥 Commits

Reviewing files that changed from the base of the PR and between a22f582 and 79c8116.

📒 Files selected for processing (3)

• packages/webui/src/client/styles/prompter.scss
• packages/webui/src/client/styles/rundownView.scss
• packages/webui/src/client/ui/Prompter/PrompterView.tsx

---

Walkthrough

This PR converts body-element-specific CSS selectors to reusable class selectors in stylesheet utilities, making prompter scrollbar and overflow styles applicable to any element. PrompterView component classList operations are reformatted for consistency.

Changes

CSS Selector Refactoring

Layer / File(s)	Summary
Class-based CSS selectors packages/webui/src/client/styles/prompter.scss, packages/webui/src/client/styles/rundownView.scss	Prompter scrollbar styling and rundown view overflow behavior selectors are decoupled from body element, converting to .prompter-scrollbar, .vertical-overflow-only, and .no-overflow class selectors for broader reusability.
PrompterView classList formatting packages/webui/src/client/ui/Prompter/PrompterView.tsx	classList.add and classList.remove calls in componentDidMount and componentWillUnmount are reformatted onto single lines without behavioral changes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested labels

Contribution from TV 2 Norge

Suggested reviewers

• chandrashekar-nallamilli

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: fixing/restoring prompter scrollbar styling with a specific ticket reference.
Description check	✅ Passed	The description is well-related to the changeset, explaining the bug (lost scrollbar styling), the fix (applying classes correctly), and affected areas.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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 and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!