Size compare slots by available width so titles are never clipped - #2715
Size compare slots by available width so titles are never clipped#2715BigSimmo wants to merge 4 commits into
Conversation
PR #2681 moved three slots to three-across from the sm breakpoint. That fits the tiles but not their titles: at around 660px each tile leaves roughly 100px for text, so "Major depressive disorder" rendered as "Major depressi..." and "Persistent depressive disorder" as "Persistent depressi...". Truncated names are the fault that redesign existed to fix, reintroduced in the one width band it was never checked at. Three slots go back to two-across until lg. A third tile wrapping to its own row reads better than three clipped ones. The four-slot case keeps the 2x2 layout from #2681, which was the real improvement there. Verified against the running dev server at 660px and 1280px: no title is clipped at either width (scrollHeight equals clientHeight on every tile title), where 660px clipped two of three before the change. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015JVB9VaJjH9dKL7gJ6ZGu3
|
Important
This repository does not receive automatic reviews because it has fewer than 10 stars. ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Advanced Run ID: 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 |
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_3fcc1ed5-5ace-4b4f-9780-8070e0bd3525) |
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 163e2abb60
ℹ️ 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".
Codex review on this PR was right: lg is not a proxy for usable width. The desktop sidebar takes 20rem expanded and 5.25rem collapsed, so the same lg viewport hands this strip either ~876px or ~640px. Reproduced on /dsm/compare at 1024px with the sidebar expanded: the strip is 640px and two of three titles clip, which is the fault the previous commit set out to fix. The same review also reported a clip at 1280px expanded; that one did not reproduce (strip 896px, no title clipped). The strip now declares @container and the column rules key off its own width. Thresholds are measured, not guessed: forcing each column count and sweeping the strip width, the last width that clips a title is 560px at two columns, 864px at three and 1152px at four. Each breakpoint sits just above its measured floor. Swept 390px to 1920px against both sidebar states: no title clips in any configuration on this page. Two side effects, both improvements. A 640px viewport now shows one column rather than two, because a 592px strip was below the two-column floor and clipped. A 1024px viewport with the sidebar collapsed shows two columns rather than three, trading a column for the headroom that longer therapy titles need. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015JVB9VaJjH9dKL7gJ6ZGu3
The phone snap rail capped tiles at 11.5rem. Measured on /dsm/compare at 390px, that left the title 86px once the badge and the 48px clear-button gutter were taken out, so "Persistent depressive disorder (dysthymia)" clipped even at the three-line clamp. It is the same fault as the desktop one this PR started with, in the layout the grid rules never reached: they are inert under display flex. Swept tile width against the clear gutter at 390px: 224px of tile still clips, 248px does not. The rail now runs 15.5rem to 17rem. Shrinking the gutter instead was rejected because the clear button is a 48px tap target and the repo holds production targets at 48px. Verified at 360, 390, 430 and 540px: no title clipped, no page overflow, and the 264px tile on a 358px strip still shows the next tile, so the rail keeps its scroll affordance. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015JVB9VaJjH9dKL7gJ6ZGu3
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_2c727f77-9de6-4e2d-9852-000281ece433) |
BigSimmo
changed the title
Bugbot couldn't run - usage limit reachedBugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit. A user or team admin can review and increase usage limits in the Cursor dashboard. (requestId: serverGenReqId_4a9ed7f1-dc77-486f-a6ab-bdec7b53498d) |
2 participants
Summary
Three fixes to the compare slot strip, all one fault: a slot title being cut off. Every threshold below is measured by forcing the layout and sweeping the width until titles stop clipping, not chosen by eye.
sm, which clipped titles at ~660px. Deferring tolgwas not enough either, because the sidebar takes 20rem expanded and 5.25rem collapsed, so onelgviewport hands this strip either ~876px or ~640px. The strip now declares@containerand the column rules key off its own width. Measured floors: 560px at two columns, 864px at three, 1152px at four, so the breakpoints are38rem,55rem,74rem.Verification
npm run typecheck—[gate-receipts] recorded a pass for "typecheck:internal" (7425 input files)npx eslint src/components/compare/compare-slot-strip.tsx— cleanTest Files 11 passed (11) / Tests 54 passed (54)/dsm/comparewith three diagnoses (longest title "Persistent depressive disorder (dysthymia)"), 390px to 1920px against both sidebar states. No title clips in any configuration:pageOverflow=0, and a 264px tile on a 358px strip still shows the next tile, so the rail keeps its scroll affordance.Verification not run: npm run verify:pr-local— responsive classes in a single component, covered by the focused gates and the browser sweeps above. Full browser suite left to CI, which was green on the first two commits.Risk and rollout
Notes
Two deliberate side effects on desktop, both trading a column for readable titles. A 640px viewport shows one column instead of two, because a 592px strip was below the two-column floor and was clipping. A 1024px viewport with the sidebar collapsed shows two columns instead of three, keeping headroom for the longer therapy titles.
The container-width finding came from the Codex review on this PR and is fixed in a769c7d. That review also reported a clip at 1280px with the sidebar expanded, which did not reproduce: the strip measures 896px there and nothing clips.
🤖 Generated with Claude Code
https://claude.ai/code/session_015JVB9VaJjH9dKL7gJ6ZGu3
Note
Low Risk
Responsive Tailwind classes in a single compare UI component; no auth, data, or API changes.
Overview
Fixes compare slot titles clipping when the desktop sidebar changes how much horizontal space the strip actually gets.
The strip root now uses
@container, andslotGridColumnsswitches column counts with@min-[38rem]/@min-[55rem]/@min-[74rem]on the strip’s width instead ofsm/lgviewport classes. That keeps two/three/four-across layouts aligned with measured title floors (including long therapy names) whether the sidebar is expanded or collapsed. Four slots still step up to four columns only when the strip is wide enough, preserving the 2×2 pattern rather than leaving a lone fourth tile.On the compact phone snap rail, tile width increases from ~11.5rem to 15.5rem–17rem so titles aren’t squeezed after the badge and 48px clear control gutter—without shrinking the tap target.
Tradeoff: some desktop widths show fewer columns than before (e.g. one column below the two-column floor, two instead of three at ~1024px with a collapsed sidebar) in exchange for readable titles.
Reviewed by Cursor Bugbot for commit 811a6e4. Configure here.