feat: hide nextjs portal

[Kitenite]

Description

Related Issues

Type of Change

• Bug fix
• New feature
• Documentation update
• Release
• Refactor
• Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

---

Important

Hides nextjs-portal by setting display: none; in onlook-preload-script.js and css-manager.ts.

• Behavior:
  • Hides nextjs-portal by setting display: none; in onlook-preload-script.js and css-manager.ts.
• Files:
  • onlook-preload-script.js: Adds CSS rule to hide nextjs-portal.
  • css-manager.ts: Adds CSS rule to hide nextjs-portal in injectDefaultStyles() method.

^{This description was created by for cad4077. You can customize this summary. It will automatically update as commits are pushed.}

Summary by CodeRabbit

• Bug Fixes

  • Prevented unintended Next.js portal elements from appearing by updating default injected styles, reducing visual artifacts.
  • Fixed a production build/runtime issue by correcting the loader import in the app layout, ensuring reliable initialization.

• Style

  • Updated default CSS injection to include a rule that hides the Next.js portal element.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
web	Building	Preview	Comment	Sep 22, 2025 8:45pm

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Sep 22, 2025 8:45pm

[supabase]

This pull request has been ignored for the connected project wowaemfasoptxrdjhilu because there are no changes detected in apps/backend/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Adds a CSS rule to hide the Next.js portal element in both the public preload script and the CSS manager. Cleans up and corrects an import for RB2BLoader in the app layout to resolve a duplicate/undefined import. No changes to control flow or exported APIs.

Changes

Cohort / File(s)	Summary
Default CSS injection apps/web/client/public/onlook-preload-script.js, apps/web/preload/script/api/style/css-manager.ts	Extend injected default styles to include nextjs-portal { display: none; }, hiding the Next.js portal element.
Layout import cleanup apps/web/client/src/app/layout.tsx	Add the correct RB2BLoader import at the top and remove the duplicate later import; aligns usage and fixes potential build error.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

Hop hop, I nudge the styles in place,
Hiding portals with a gentle grace.
A loader found its path, import true,
No doubles now—just clean and new.
With CSS whiskers and tidy might,
This rabbit wraps the UI tight. 🐇✨

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/hide-next-portal

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b752c2b and cad4077.

📒 Files selected for processing (3)

• apps/web/client/public/onlook-preload-script.js (1 hunks)
• apps/web/client/src/app/layout.tsx (1 hunks)
• apps/web/preload/script/api/style/css-manager.ts (1 hunks)

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

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