Size compare slots by available width so titles are never clipped

[BigSimmo]

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.

• Desktop columns follow the strip's width, not the viewport's. PR Rebuild the comparison selection tile and align the comparison surfaces #2681 moved three slots to three-across from sm, which clipped titles at ~660px. Deferring to lg was not enough either, because the sidebar takes 20rem expanded and 5.25rem collapsed, so one lg viewport hands this strip either ~876px or ~640px. The strip now declares @container and the column rules key off its own width. Measured floors: 560px at two columns, 864px at three, 1152px at four, so the breakpoints are 38rem, 55rem, 74rem.
• Four slots keep the 2x2 layout from Rebuild the comparison selection tile and align the comparison surfaces #2681 rather than orphaning the fourth tile on a row of its own.
• The phone snap rail was capped at 11.5rem, leaving the title 86px once the badge and the 48px clear-button gutter were taken out, so a long name clipped even at the three-line clamp. 224px of tile still clips, 248px does not, so the rail now runs 15.5rem to 17rem. Shrinking the gutter instead was rejected: the clear button is a 48px tap target and this repo holds production targets at 48px.

Verification

• npm run typecheck — [gate-receipts] recorded a pass for "typecheck:internal" (7425 input files)
• npx eslint src/components/compare/compare-slot-strip.tsx — clean
• Compare DOM suites — Test Files 11 passed (11) / Tests 54 passed (54)
• Browser sweep on /dsm/compare with three diagnoses (longest title "Persistent depressive disorder (dysthymia)"), 390px to 1920px against both sidebar states. No title clips in any configuration:

1024px sidebar=collapsed strip= 876px cols=2 clipped=none
1024px sidebar=EXPANDED  strip= 640px cols=2 clipped=none
1280px sidebar=collapsed strip=1132px cols=3 clipped=none
1280px sidebar=EXPANDED  strip= 896px cols=3 clipped=none
1440px sidebar=EXPANDED  strip=1056px cols=3 clipped=none

• Phone widths 360, 390, 430, 540px: no title clipped, 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

• Risk: Low. Responsive class strings in one component. No data, schema, or config change.
• Rollback: Revert the commits on this branch.
• Provider or production effects: None.
• RAG impact: none

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 data, auth, or API changes.

Overview
The compare slot strip now sizes its column layout from the strip’s own width instead of viewport breakpoints: the root gets @container, and slotGridColumns uses measured @min-[38rem], @min-[55rem], and @min-[74rem] thresholds so 2/3/4 columns only appear when long titles (e.g. on /dsm/compare) still fit—avoiding clips when the sidebar expands or collapses at the same viewport size. Four slots stay on a 2×2 grid until the strip is wide enough for four columns.

On the compact phone snap rail, tile min/max width increases from ~11.5rem to 15.5rem–17rem so three-line titles aren’t squeezed by the badge and 48px clear control, while still peeking the next tile for scroll affordance.

^{Reviewed by Cursor Bugbot for commit 0a33572. Configure here.}

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: c1ee2542-e9ce-480e-a3e9-eda2bef19365

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-09-07T09:37:12.701173Z	163e2ab	PR opened

ℹ️ 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" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot 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)

[supabase]

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[chatgpt-codex-connector]

💡 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".

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot 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)

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot 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)

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot 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_6eb14ed1-b270-4007-bc38-0e8b61576815)

[github-actions]

CI triage

CI failed on this PR. Automated classification of the 2 failed job(s):

• Lighthouse budget — not baselined: this job did NOT run on the main comparison below (path-scoped skip), so that run says nothing about it either way. Treat the comparison as absent, not green, and inspect the failing step.
• PR required — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.

Compared with main CI run #16509 (success). That run's conclusion is an aggregate and did not exercise Lighthouse budget.

Classification is evidence routing, not permission to ignore a failure. Exact quarantined Playwright identities remain governed by the flake ledger.