Conversation
The Code Judge Examples picker used `tabs tabs-bordered flex-nowrap overflow-x-auto` to keep five long labels on one line. DaisyUI's `.tab` is a fixed height, so the horizontal scrollbar ate into it: labels were sliced in half, the bordered underline hid behind the scrollbar track, and the active tab could scroll out of view. Both example pickers now render as boxed tabs that wrap instead of scrolling. DaisyUI v4 makes `.tabs` a grid with every `.tab` pinned to row 1, so the container carries explicit `flex flex-wrap` to get real row wrapping rather than labels wrapping inside fixed-height pills. Declaring the tabs roles means honoring the APG contract, so both pickers also get roving tabindex, ArrowLeft/ArrowRight with wrap-around, Home/End, focus following selection, and a focusable code panel so it can be scrolled without a pointer. Modified arrow keys pass through to the browser. The Code Tool picker carried the same markup and now gets its own route test, so the two copies fail a test if they drift. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JpYqNrEVKufmxd9QN9X1n3
Contributor
|
Important Review skippedToo many files! This PR contains 576 files, which is 276 over the limit of 300. To get a review, reduce the PR to 300 files or fewer by splitting it into smaller PRs or changing its base branch. Usage-priced reviews support at most 300 files. ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (576)
You can disable this status message by setting the 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this PR do?
Fixes the example-picker "tabs" control in the Code Judge Examples dialog, which rendered with its labels sliced in half.
The bug
code_eval_form.svelteusedtabs tabs-bordered flex-nowrap overflow-x-autoto keep five long labels on one line. DaisyUI's.tabis a fixed height, so the horizontal scrollbar the browser adds ate into that height: labels were cut mid-glyph, thetabs-borderedunderline hid behind the scrollbar track, and the active tab could scroll out of view entirely.A near-identical picker in the Code Tool Examples dialog (
add_tools/code_tool/+page.svelte) had the same markup withoutflex-nowrap overflow-x-auto, so it wrapped instead — two different behaviors for the same control.The fix
Both pickers now render as DaisyUI boxed tabs that wrap rather than scroll.
One non-obvious detail: in DaisyUI v4,
.tabsisdisplay: gridwith every.tabpinned togrid-row-start: 1. Removingflex-nowrap overflow-x-autoalone would not have produced row wrapping — the grid columns would just squeeze and labels would wrap inside the fixed-height pills, which is the same clipping in a different form. The container therefore carries explicitflex flex-wrap, with the label in a<span class="truncate">so an over-long label clips inside its pill instead of painting outside it. Both are commented in place so they don't get "tidied up" later.Declaring
role="tablist"/role="tab"makes assistive tech announce this as a tab widget and promises the APG interaction contract, so both pickers now honor it:tabindex="0"on therole="tabpanel"so the scrollable code block is reachable without a pointer (WCAG 2.1.1)Size is the explicit default rather than
tabs-sm: at 24px, DaisyUI'soutline-offset: -5pxfocus ring draws across the glyphs, which matters now that arrow-key navigation is a first-class path.The handler is duplicated across the two files rather than extracted into a shared component — a deliberate scope decision, with tests on both copies so they fail if they drift.
Related Issues
Contributor License Agreement
Checklists
uv run ./checks.sh --agent-modepasses clean. Web suite: 2333 tests passing, including 56 across the two changed pickers — new coverage for keyboard navigation, roving tabindex, panel focusability, accessible naming, unhandled/modified key passthrough, and a two-instance render proving the per-instance element ids don't collide.add_tools/code_tool/gets its first route test, so the second copy is no longer unpinned.Generated by Claude Code