design(dictionary): phone control-row study — condensed switch, and the search term on its own line - #2241
Conversation
Design-scratch mockup only; no production route or component changes. Three replacements for the phone Terms / Abbrev row, each attacking a different cost: the second line itself, the segmented control's unselected option, and having two controls at all. All three drop the decorative dots and fold the row into the summary line, so the control block goes from two rows to one. Desktop sort, view, Filter and the letter rail are unchanged and rendered only as context. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Design-scratch mockup only; no production route or component changes. Direction 01 is chosen, so the study narrows to the open question: one row or two. The page now renders the real row at 320/360/375/390/430 px and reads the verdict off the live DOM (track scrollWidth against clientWidth) rather than asserting a fit, and shows both candidates in place at a true 390 px frame, idle and with a query running. Tapping the composer toggles the query so the search state is judged as a transition. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Design-scratch mockup only; no production route or component changes. Two defects in the previous measurement pass. The verdict compared scrollWidth to clientWidth, which `ml-auto` on Filter absorbs, so it read a dead-heat zero at every width and hid both the slack and the shortfall; it now sums the controls' intrinsic widths against the track's content box. And the idle/query toggle only seeded state on mount, so it re-measured rows it had not changed — the fit rows are now keyed on the mode. The row itself gains `flex-wrap`, so where one line genuinely cannot hold the controls they wrap rather than clip. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Design-scratch mockup only; no production route or component changes. A seven-letter query was flattering the row. The composer now cycles empty -> "tardive" -> "tardive dyskinesia" -> empty and the fit strip gains the same third mode, because the chip is the only control that gives ground and a real clinical term is what it has to hold. Measured at 390 px: the chip is 135 px with 95 px of text room. A single-word query fits whole; "tardive dyskinesia" wants 123 px and truncates. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Design-scratch mockup only; no production route or component changes. Sharing one line with the controls does not leave the query enough room. At a true 390 px phone the chip gets 135 px of which 95 px is text, so a real two-word term is cut to "tardive dyski…". On its own line the same words get 294 px and "1 abbreviation for “tardive dyskinesia”" fits whole — three times the room, spent only while a search is running. So browsing stays one row of controls, and searching adds a line above it carrying the count and the query with its own clear button; the alphabet stands down there rather than competing for width. Two fixes the measurement itself needed. The phone frames pinned their width with `w-[24.375rem]`, an arbitrary value no production file uses, so the mockup stylesheet never emitted it and the frames were rendering wider than a phone — the width is now inline. And the count line said "1 abbreviations". Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…nd one Design-scratch mockup only; no production route or component changes. The searching frames opened on the long query, and the composer cycles short -> long -> empty, so the very first tap on the frame labelled "searching" cleared the search and dropped the reader back to browsing — the opposite of what the label promised. They now open on the short query, so the first tap reveals the two-word stress case and only the second clears. The frame hint says what the tap does. Verified by driving the page: on load "1 abbreviation for “tardive”", one tap "1 abbreviation for “tardive dyskinesia”" un-truncated, two taps back to browsing with no search line. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This pull request has been ignored for the connected project Preview Branches by Supabase. |
Warning Review limit reachedYou’ve reached a temporary PR review limit under our Fair Usage Limits Policy. Next review available in:59 minutes Limit details: You’ve used the included review currently available. Your 87 included PR review attempts over the past 7 days set your current allowance at 1 review per hour. Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab. How can I continue?Wait for the limit to reset, then comment An organization admin can change what happens after included review limits in Billing. How do review limits work?CodeRabbit enforces per-developer PR review limits within each organization. For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
Comment |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit:71192dd85a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Uh oh!
There was an error while loading. Please reload this page.
BigSimmo
commented
Aug 21, 2026
@codex resolve actionable Codex review findings for this pull request and current head using the repository instructions. This is the pull request's single automatic repair pass: do not perform a fresh review, create new standalone findings, or request another review. Work only the existing unresolved Codex threads on the current head. The only repository destination is BigSimmo/Database, and the only branch destination is the pull request head branch claude/phone-dictionary-header-9180ee at starting commit 71192dd; never publish fixes to a detached or synthetic work branch and never create a stacked pull request. Use the authenticated GitHub connector to commit each approved fix to BigSimmo/Database:claude/phone-dictionary-header-9180ee, then verify that the pull request head contains the published commit before reporting success. Always fix P0 and P1 findings. For P2 and lower findings, fix only clear, scoped, low-risk issues; otherwise disposition them with a concise reason. For a fixed thread, reply with as the first line and as the second line. For a no-code disposition, use followed by . These result markers authorize the workflow to close that exact thread only after it verifies a fixed commit is the pull request head; a local-only commit is not a fix. If publication or verification fails, do not use either result marker, do not claim success, and leave the thread open with the blocker. If human input or new authorization is required, do the same. Finish only after every actionable thread is fixed or dispositioned and closed, or explicitly left open for a human decision. Do not update the branch from main, address unrelated reviews, broaden scope, or create more than one scoped fix commit. Do not use external APIs, paid services, credentials, dependency changes, or broad refactors unless explicitly authorized. Add targeted tests where behavior changes and run the narrowest relevant validation. |
Codex Review: Didn't find any major issues. Delightful! Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
CI triageCI failed on this PR. Automated classification of the 2 failed job(s):
Compared with main CI run #12960 (success). That run's conclusion is an aggregate and did not exercise Classification is evidence routing, not permission to ignore a failure. Exact quarantined Playwright identities remain governed by the flake ledger. |
QueryChip is min-w-0 flex-1, so FitRow's fit measurement summed its flex-allotted box width, not the width its truncated text actually wants -- a long query silently read as "fits" while the words were being clipped. Read the clipped amount off the live text node (scrollWidth vs clientWidth) and fold it into the slack calculation, so a truncating query surfaces as a real shortfall. Addresses PR #2241 review comment (chatgpt-codex-connector, 2026-08-21) on src/components/dictionary-control-row-mockups.tsx:549. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015StJgDC2dfef8PXN9dfriw
Uh oh!
There was an error while loading. Please reload this page.
Summary
/mockups/dictionary-control-rowfor the Dictionary phone control row. Design scratch only: no production route, component, navigation or test behaviour changes, and/mockups/**404s in production.layout="equal"andw-fullbelowsm, so a view holding 11 of 107 entries takes half a phone. Three condensed replacements were explored; the owner chose the one that keeps the switch visible but sizes it to its own labels and drops the decorative leading dots.FitStriprenders the real row at 320 / 360 / 375 / 390 / 430 px and reads the verdict off the live DOM.flex-wrapso the widths where it genuinely cannot hold (320 px, or any phone at an enlarged text size) drop Filter to a second line rather than clipping it.Verification
npm run typecheck— exit 0.npx eslinton every changed source file — exit 0.npx prettier --checkon every changed file — "All matched files use Prettier code style!".npm run verify:pr-local— not run locally. The repository run coordinator was occupied by other worktrees for the duration of the session andnpm run formatand the full gate both timed out on lock contention. The dry-run plan was inspected and its lint / typecheck / format legs were run individually as recorded above; the remaining legs (test, build, docs and ledger contracts) are left to CI, which enforces them on this PR.npm run verify:ui— not run. This diff adds a mockup route only;/mockups/**is outside the wiring and reachability gates and no shared UI foundation, production route, styling token or browser behaviour changed, so no production journey has a plausible changed failure path.Risk and rollout
Design scratch.
/mockups/**returns 404 in production androbots.txtdisallows it, so nothing here is user-reachable. The new client chunks are attributed to the separatemockupsbundle budget rather thanproduction. Rollback is deleting the route and component.Notes
Not clinical-risk under
classifyPullRequestFiles: nosrc/app/api/,supabase/,src/lib/behaviour, and no auth, permission, privacy, security, upload, download or patient path. No RAG ranking surface is touched, so noRAG impact:line is required.Three defects were found and fixed in the study's own measuring code while building it, which is worth recording because the earlier numbers in this PR's history are wrong:
scrollWidthtoclientWidth.ml-autoon Filter absorbs every spare pixel, so that comparison reported a dead-heat zero at every width and hid both the slack and the shortfall. It now sums the controls' intrinsic widths against the track's content box.w-[24.375rem]. No production file uses that arbitrary value, so the mockup stylesheet never emitted the class and the frames were silently rendering wider than a phone — in a page whose entire purpose is measuring a phone. The width is now inline, which is the same trapmockups/README.mdalready records forgrid-cols-6.🤖 Generated with Claude Code