Skip to content

Optimise phone touch targets and fix Therapy Compass mobile overflow #736

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BigSimmo merged 8 commits into from
Jul 17, 2026
Merged

Optimise phone touch targets and fix Therapy Compass mobile overflow #736

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1c786ea
Optimise phone touch targets and fix therapy-compass mobile overflow
claude Jul 17, 2026
0adab96
Merge branch 'main' into claude/phone-touch-optimization-673ur4
BigSimmo Jul 17, 2026
6f3870c
Merge branch 'main' into claude/phone-touch-optimization-673ur4
BigSimmo Jul 17, 2026
6e7e360
Merge origin/main into claude/phone-touch-optimization-673ur4
cursoragent Jul 17, 2026
14b56fb
Merge origin/main into claude/phone-touch-optimization-673ur4
cursoragent Jul 17, 2026
fe501a0
Merge origin/main into claude/phone-touch-optimization-673ur4
cursoragent Jul 17, 2026
a1d5835
Merge origin/main into claude/phone-touch-optimization-673ur4
cursoragent Jul 17, 2026
755da28
Merge origin/main into phone-touch optimization
cursoragent Jul 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1442,6 +1442,21 @@ summary::-webkit-details-marker {
color: var(--clinical-accent);
}

/* Touch devices: suggestion/follow-up chips are primary tap targets (the
follow-ups sit directly under the composer and each fires a new search).
Meet the 44px tap floor and widen the gap so neighbouring chips in the
horizontal scroll row don't invite mis-taps. Fine-pointer (mouse) users keep
the compact 32px chip — no desktop visual change. */
@media (pointer: coarse) {
.answer-suggestion-chips {
gap: 0.5rem;
}

.answer-suggestion-chip {
min-height: var(--spacing-tap);
}
}

.answer-suggestion-chip:disabled {
cursor: not-allowed;
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/ClinicalDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,7 @@ function PriorAnswerTurnSurface({
type="button"
onClick={onToggleCollapsed}
aria-expanded={!collapsed}
className="inline-flex min-h-9 items-center gap-1.5 rounded-md px-1 text-xs font-semibold text-[color:var(--text-muted)] transition hover:text-[color:var(--text-heading)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
className="inline-flex min-h-tap items-center gap-1.5 rounded-md px-1 text-xs font-semibold text-[color:var(--text-muted)] transition hover:text-[color:var(--text-heading)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
>
<ChevronDown className={cn("h-4 w-4 transition-transform", !collapsed && "rotate-180")} aria-hidden="true" />
{collapsed ? "Show previous answer" : "Hide previous answer"}
Expand Down Expand Up @@ -3718,7 +3718,7 @@ export function ClinicalDashboard({
type="button"
onClick={stopSearch}
data-testid="stop-answer"
className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-[color:var(--border-strong)] bg-[color:var(--surface-raised)] px-3 py-1 text-xs font-semibold text-[color:var(--text-heading)] shadow-[var(--shadow-inset)] transition hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
className="inline-flex min-h-tap shrink-0 items-center gap-1.5 rounded-full border border-[color:var(--border-strong)] bg-[color:var(--surface-raised)] px-3 py-1 text-xs font-semibold text-[color:var(--text-heading)] shadow-[var(--shadow-inset)] transition hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
>
<Square aria-hidden="true" className="h-3 w-3 shrink-0 fill-current" />
Stop
Expand Down Expand Up @@ -3833,7 +3833,7 @@ export function ClinicalDashboard({
type="button"
data-testid="answer-thread-show-earlier"
onClick={() => setShowEarlierTurns(true)}
className="inline-flex min-h-9 items-center gap-1.5 rounded-md border border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-3 text-xs font-semibold text-[color:var(--text-muted)] transition hover:border-[color:var(--border-strong)] hover:text-[color:var(--text-heading)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
className="inline-flex min-h-tap items-center gap-1.5 rounded-md border border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-3 text-xs font-semibold text-[color:var(--text-muted)] transition hover:border-[color:var(--border-strong)] hover:text-[color:var(--text-heading)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
>
Show earlier messages ({hiddenPriorTurnCount})
</button>
Expand Down
24 changes: 12 additions & 12 deletions src/components/DocumentViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -372,7 +372,7 @@ function FormattedHighYieldSummary({
<button
type="button"
onClick={() => setExpanded((current) => !current)}
className={cn(floatingControl, "min-h-9 px-3 text-xs")}
className={cn(floatingControl, "sm:min-h-9 px-3 text-xs")}
data-testid="toggle-full-summary"
>
{expanded ? "Show key points only" : "Show full summary"}
Expand Down Expand Up @@ -472,7 +472,7 @@ function DocumentImage({ image }: { image: ImageRow }) {
<>
{figcaptionBlock}
<details className="group mt-3">
<summary className="flex min-h-9 cursor-pointer list-none items-center gap-2 text-xs font-semibold text-[color:var(--text-muted)] transition hover:text-[color:var(--text)]">
<summary className="flex min-h-tap cursor-pointer list-none items-center gap-2 text-xs font-semibold text-[color:var(--text-muted)] transition hover:text-[color:var(--text)] sm:min-h-9">
<FileImage aria-hidden="true" className="h-4 w-4 shrink-0" />
Show original table image
<ChevronDown aria-hidden="true" className="h-3.5 w-3.5 transition group-open:rotate-180" />
Expand Down Expand Up @@ -549,7 +549,7 @@ function TableReviewPanel({
disabled={!canReview || busyFactId === fact.id}
onClick={() => onReview(fact, value)}
className={cn(
"inline-flex min-h-8 items-center rounded-md border px-2 text-2xs font-semibold transition",
"inline-flex min-h-tap items-center rounded-md border px-2 text-2xs font-semibold transition sm:min-h-8",
reviewClass === value
? "border-[color:var(--clinical-accent)]/35 bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]"
: "border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)]",
Expand Down Expand Up @@ -717,15 +717,15 @@ function PinnedSourceEvidence({
{visibleContent || "No displayable clinical text was available for this indexed passage."}
</blockquote>
<div className="mt-3 flex flex-wrap gap-2">
<a href="#pdf-preview-section" className={cn(primaryButton, "min-h-9 px-3 text-xs")}>
<a href="#pdf-preview-section" className={cn(primaryButton, "sm:min-h-9 px-3 text-xs")}>
<ExternalLink aria-hidden="true" className="h-4 w-4" />
Open source
</a>
{compact && isLong ? (
<button
type="button"
onClick={() => setExpandedChunkId((current) => (current === chunk.id ? null : chunk.id))}
className={cn(secondaryButton, "min-h-9 px-3 text-xs")}
className={cn(secondaryButton, "sm:min-h-9 px-3 text-xs")}
data-testid="toggle-full-passage"
>
{expanded ? "Show passage preview" : "Show full passage"}
Expand Down Expand Up @@ -983,11 +983,11 @@ const IndexedTextPanel = memo(function IndexedTextPanel({
{pageHitSummary || "No page numbers indexed for these hits"}
</p>
</div>
<div className="flex shrink-0 gap-1.5">
<div className="flex shrink-0 gap-2">
<button
type="button"
onClick={() => moveHit(-1)}
className={cn(secondaryButton, "min-h-9 min-w-9 justify-center p-0")}
className={cn(secondaryButton, "size-tap justify-center p-0")}
aria-label="Previous document search hit"
title="Previous document search hit"
>
Expand All @@ -996,7 +996,7 @@ const IndexedTextPanel = memo(function IndexedTextPanel({
<button
type="button"
onClick={() => moveHit(1)}
className={cn(secondaryButton, "min-h-9 min-w-9 justify-center p-0")}
className={cn(secondaryButton, "size-tap justify-center p-0")}
aria-label="Next document search hit"
title="Next document search hit"
>
Expand Down Expand Up @@ -1294,7 +1294,7 @@ function DocumentManualTagEditor({
type="button"
onClick={() => saveManualTag(label)}
disabled={!editingLabel.trim() || busyAction !== null}
className={cn(primaryButton, "min-h-9 px-2 text-xs")}
className={cn(primaryButton, "sm:min-h-9 px-2 text-xs")}
aria-label={`Save ${label.label}`}
>
{busyAction === `edit:${label.id}` ? (
Expand All @@ -1307,7 +1307,7 @@ function DocumentManualTagEditor({
type="button"
onClick={() => setEditingId(null)}
disabled={busyAction !== null}
className={cn(secondaryButton, "min-h-9 px-2 text-xs")}
className={cn(secondaryButton, "sm:min-h-9 px-2 text-xs")}
aria-label="Cancel edit"
>
<X aria-hidden="true" className="h-4 w-4" />
Expand All @@ -1323,7 +1323,7 @@ function DocumentManualTagEditor({
setEditingType(label.label_type);
}}
disabled={!canManage || busyAction !== null}
className={cn(secondaryButton, "min-h-9 px-2 text-xs")}
className={cn(secondaryButton, "sm:min-h-9 px-2 text-xs")}
aria-label={`Rename ${label.label}`}
>
<Pencil aria-hidden="true" className="h-4 w-4" />
Expand All @@ -1332,7 +1332,7 @@ function DocumentManualTagEditor({
type="button"
onClick={() => deleteManualTag(label)}
disabled={!canManage || busyAction !== null}
className={cn(secondaryButton, "min-h-9 px-2 text-xs text-[color:var(--danger)]")}
className={cn(secondaryButton, "sm:min-h-9 px-2 text-xs text-[color:var(--danger)]")}
aria-label={`Remove ${label.label}`}
>
{busyAction === `delete:${label.id}` ? (
Expand Down
2 changes: 1 addition & 1 deletion src/components/clinical-dashboard/dashboard-shell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ export function GuideDialog({ open, onClose }: { open: boolean; onClose: () => v
contentClassName="font-sans sm:max-w-2xl"
titleClassName="text-lg-minus font-semibold tracking-normal sm:text-lg"
bodyClassName="p-4 sm:p-5"
closeButtonClassName="grid h-10 w-10 shrink-0 place-items-center rounded-full text-[color:var(--text-muted)] transition hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text-heading)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
closeButtonClassName="grid size-tap shrink-0 place-items-center rounded-full text-[color:var(--text-muted)] transition hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text-heading)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
>
<div className="grid gap-3 sm:grid-cols-2">
{guideSections.map((section) => (
Expand Down
Loading