[Docs][UI] - Fix unclickable links in tabbed content#883
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughUpdated a docs UI tabs component to add before:pointer-events-none to a pseudo-element, preventing overlay interactions. Reformatted production getting-started documentation: standardized OAuth Callback URL presentation using fenced code blocks across multiple provider tabs and adjusted a couple of provider doc links. Changes
Sequence Diagram(s)Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
✨ Finishing Touches
🧪 Generate 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. Comment |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR fixes a critical user experience issue where links and interactive elements within tabbed content were unclickable in the documentation. The core problem was in the TabsContent component in docs/src/components/ui/tabs.tsx, which uses a ::before pseudo-element that covers the entire content area (before:inset-0) for focus visualization effects. This invisible overlay was intercepting all mouse events, preventing user interaction with content inside tab panels.
The fix adds before:pointer-events-none to the pseudo-element styling, which tells the browser to ignore pointer events on the overlay while preserving its visual appearance. This is a standard CSS technique for overlays that need to be visible but not interactive.
Additionally, the PR includes formatting improvements to docs/templates/getting-started/production.mdx, where OAuth provider setup sections within TabsContent components were reformatted with better indentation, spacing, and structure. Callback URLs were changed from inline code to code blocks for improved readability and interaction.
This change integrates seamlessly with the existing UI component architecture, which is built on top of Radix UI primitives and uses utility classes for styling. The fix maintains all existing visual effects while restoring proper interactivity to tabbed content across the documentation.
Confidence score: 5/5
- This PR is safe to merge with minimal risk as it addresses a clear UX bug with a targeted CSS fix
- Score reflects a simple, well-understood change that follows standard web development practices for handling pseudo-element overlays
- No files require special attention as the changes are straightforward and isolated to UI styling
2 files reviewed, no comments
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
docs/templates/getting-started/production.mdx (3)
55-57: Use explicit code-fence language for copy UXMark these single-line URLs as text for consistent rendering and copy-to-clipboard behavior.
- ``` + ```text https://api.stack-auth.com/api/v1/auth/oauth/callback/google ```Apply the same ```text to each Callback URL fence in these sections.
Also applies to: 65-66, 74-75, 83-84, 92-93, 101-102, 110-111, 119-120, 128-129
96-103: Brand capitalization: GitLabUse “GitLab” (capital L) in user-facing text.
- [Gitlab OAuth Setup Guide](https://docs.gitlab.com/ee/integration/oauth_provider.html) + [GitLab OAuth Setup Guide](https://docs.gitlab.com/ee/integration/oauth_provider.html)Also update the tab label earlier in this file:
- <TabsTrigger value="gitlab">Gitlab</TabsTrigger> + <TabsTrigger value="gitlab">GitLab</TabsTrigger>
51-131: Avoid repetition: factor a reusable CallbackUrl snippetNine blocks duplicate the same pattern; consider an MDX snippet/component to reduce drift.
Example:
{/* components/CallbackUrl.mdx */} export const CallbackUrl = ({ provider }) => ( <div> Callback URL: ```text https://api.stack-auth.com/api/v1/auth/oauth/callback/{provider} ``` </div> )Then: etc.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/src/components/ui/tabs.tsx(1 hunks)docs/templates/getting-started/production.mdx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer ES6 Map over Record when representing key–value collections
Files:
docs/src/components/ui/tabs.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (9)
- GitHub Check: setup-tests
- GitHub Check: docker
- GitHub Check: build (22.x)
- GitHub Check: lint_and_build (latest)
- GitHub Check: restart-dev-and-test
- GitHub Check: build (22.x)
- GitHub Check: all-good
- GitHub Check: docker
- GitHub Check: Security Check
🔇 Additional comments (1)
docs/src/components/ui/tabs.tsx (1)
64-66: Fix correctly unblocks clicks in tab panelsAdding before:pointer-events-none to the focus overlay on TabsContent prevents the pseudo-element from intercepting clicks—this matches the PR’s goal and is safe for a11y. Nice fix.
2 participants
Important
Fixes unclickable links in tabbed content by updating CSS and improves readability in
production.mdx.TabsContentby addingbefore:pointer-events-noneto CSS intabs.tsx.production.mdxfor better readability by adding line breaks and code blocks.This description was created by
for b4dba1d. You can customize this summary. It will automatically update as commits are pushed.
Review by RecurseML
🔍 Review performed on 9318e2b..b4dba1d
✨ No bugs found, your code is sparkling clean
✅ Files analyzed, no issues (1)
•
docs/src/components/ui/tabs.tsx⏭️ Files skipped (trigger manually) (1)
docs/templates/getting-started/production.mdxSummary by CodeRabbit
Bug Fixes
Documentation