fix(web): isolate scrollbar styles from iframe owners#32398
Problem
The app's global WebKit scrollbar rules also apply to iframe elements. In WebKit, styling an iframe owner's scrollbar can trigger resize loops and interfere with embedded content.
Change
Exclude iframe elements from the four global WebKit scrollbar selectors. Using :where() preserves their specificity. Embedded documents keep control of their own scrollbar styles.
Scope and approval
This remains a focused CSS fix for the scrollbar issue. No component, provider, server, contract, or native mobile code changes.
Verification
Reproduced continuous scrollbar and line-wrap flicker in the actual T3 Code chat timeline in Safari 26.5.2. The same inline document and 728px column stayed stable after changing only these selectors.
Compared scrollable inline HTML and ordinary HTML attachment previews before and after. The scrollbar thumb colors and widths matched, vertical and horizontal dragging worked, and the file preview reached its last section. Also checked scrollbar appearance in Chromium. Guest sessions and native mobile were not separately tested.
vp run check:changed origin/main --concurrency 2 passed after merging main. Both existing BrowserDocumentFrame browser tests passed during verification.
Implemented with GPT 6.1 Sol using the Codex harness in T3 Code.
Checks
Added 2 commits
Approvability
Verdict: Approved at 3960e0f
Macroscope's review found this PR approvable — The change excludes iframe elements from global WebKit scrollbar styling to avoid resize loops while preserving existing scrollbar declarations elsewhere. Its presentation-only scope and reported preview verification indicate limited risk.
No code changes detected at be42793. Prior analysis still applies.
You can add or adjust custom eligibility rules. Learn more.
No actionable comments were generated in the recent review.
Walkthrough
-
WebKit scrollbar styling now excludes iframe elements. The scrollbar width, track, thumb, and hover styles remain unchanged.
Changes: Scrollbar styling
Layer / File(s) Summary Exclude iframes from scrollbar rules
apps/web/src/index.cssThe WebKit scrollbar selectors now exclude iframe elements. Existing width, track, thumb, and hover styles remain unchanged. Estimated code review effort: 1 (Trivial) | ~3 minutes
Change: Bug fix
Possibly related PRs
- pingdotgg/t3code#32265: Both changes concern WebKit scrollbar styling for iframes and HTML previews.
Suggested labels:
bugfix,size:SSuggested reviewers:
t3dotgg
Merge Risk: External image Minimal · up to 3960e
-
The change excludes iframe owners from the scrollbar rules; no merge-blocking impact is evident.
Pre-merge checks: Passed 4
-
Check name Status Explanation Title check Passed The title clearly describes the scrollbar selector change. 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. Description check Passed The description is mostly complete. It covers the problem, change, scope, verification results, and agent details. It does not include the required before-and-after screenshots or a recording of the f… Full details: Description check
-
Explanation
The description is mostly complete. It covers the problem, change, scope, verification results, and agent details. It does not include the required before-and-after screenshots or a recording of the flicker. It also does not explain why the fix qualifies without prior approval.
-
Finishing Touches
-
Generate unit tests (beta)
-
- Commit to this branch
- Create a new PR
-
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Tip
🎯 Customize your risk assessments
-
Guide how CodeRabbit assesses merge risk and security architecture risk. Highlight sensitive changes and explain your security boundaries using Merge Risk Instructions and Security Risk Instructions in your review settings. Security architecture risk assessments require the Advanced plan or above.
✅ Automatic approvals, with your rules
-
Let CodeRabbit approve pull requests once required threads are resolved, pre-merge checks pass, and your risk limits are met. Enable Automatic approvals in review settings, with overrides for teams or file paths.
External image Recent review info
-
External image Run configuration
-
- Source mode: Auto
- Repository: pingdotgg/t3code
- Branch: fix/iframe-scrollbar-style-isolation
- File: .coderabbit.config.ts
- Commit: 3960e0f
- Layers: Repository TS config
- Review profile: CHILL
- Plan: Team
- Run ID:
1a3e8918-976b-4f75-a292-0bdb3439766e
External image Commits
-
Reviewing files that changed from the base of the PR and between 0f4a13071090e89c6d7eccdb0eb98b3cde1823ee and 3960e0fb1bc80f8520c7e78c235122829d146b72.
External image Files selected for processing: 1
-
apps/web/src/index.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.
External image Recent review info
-
External image Run configuration
-
- Source mode: Auto
- Repository: pingdotgg/t3code
- Branch: fix/iframe-scrollbar-style-isolation
- File: .coderabbit.config.ts
- Commit: 3960e0f
- Layers: Repository TS config
- Review profile: CHILL
- Plan: Team
- Run ID:
1a3e8918-976b-4f75-a292-0bdb3439766e
External image Commits
-
Reviewing files that changed from the base of the PR and between 0f4a13071090e89c6d7eccdb0eb98b3cde1823ee and 3960e0fb1bc80f8520c7e78c235122829d146b72.
External image Files selected for processing: 1
-
apps/web/src/index.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.
-