Skip to content

fix(responsive): resolve site-wide layout defects across all breakpoints#520

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 7 commits into from
Jul 12, 2026
Merged

fix(responsive): resolve site-wide layout defects across all breakpoints #520

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a689f69
fix(responsive): resolve site-wide layout defects across all breakpoints
BigSimmo Jul 12, 2026
6c57bd9
Merge origin/main into claude/responsive-design-review-4d7395
Copilot Jul 12, 2026
ff11093
fix: prevent evidence header overflow
BigSimmo Jul 12, 2026
dddf2a3
fix(responsive): revert redundant DocumentViewer nowrap tweak
BigSimmo Jul 12, 2026
dbdb743
Merge branch 'main' into claude/responsive-design-review-4d7395
BigSimmo Jul 12, 2026
cfee259
style: wrap launcher-results-panel attributes to satisfy prettier
BigSimmo Jul 12, 2026
889dc73
Merge branch 'main' into claude/responsive-design-review-4d7395
BigSimmo Jul 12, 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
11 changes: 8 additions & 3 deletions src/components/applications-launcher-page.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -784,7 +784,7 @@ export function ApplicationsLauncherWorkspace({
<section
aria-label={copy.allSectionLabel}
data-testid="tools-all-tools"
className="mx-auto mt-8 grid max-w-[86rem] gap-4 sm:mt-10"
className="mx-auto mt-8 grid max-w-[86rem] grid-cols-1 gap-4 sm:mt-10"
>
<div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
<div className="text-left">
Expand All@@ -800,7 +800,12 @@ export function ApplicationsLauncherWorkspace({
</div>
</div>

<div id="launcher-results-panel" role="tabpanel" aria-label={resultsPanelLabel} className="grid gap-4">
<div
id="launcher-results-panel"
role="tabpanel"
aria-label={resultsPanelLabel}
className="grid grid-cols-1 gap-4"
>
{filteredApps.length === 0 ? (
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-lux)] px-4 py-10 text-center shadow-[var(--shadow-inset)]">
<p className="text-sm font-extrabold text-[color:var(--text-heading)]">{copy.emptyTitle}</p>
Expand All@@ -813,7 +818,7 @@ export function ApplicationsLauncherWorkspace({
<ToolCard key={app.id} app={app} selected={effectiveSelectedId === app.id} onSelect={openTool} />
))}
</div>
<div className="grid gap-3 lg:hidden">
<div className="grid grid-cols-1 gap-3 lg:hidden">
{filteredApps.map((app) => (
<MobileToolRow key={app.id} app={app} selected={effectiveSelectedId === app.id} onSelect={openTool} />
))}
Expand Down
2 changes: 1 addition & 1 deletion src/components/clinical-dashboard/master-search-header.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1142,7 +1142,7 @@ export function MasterSearchHeader({
isDesktopHomeComposer
? "universal-home-search-edge mx-auto w-full"
: usesAnswerFooterStyle
? "floating-composer-edge dashboard-composer-edge z-40 mx-auto max-w-3xl max-sm:fixed max-sm:bottom-0 sm:sticky sm:top-[calc(4.75rem+env(safe-area-inset-top))] sm:z-20 lg:fixed lg:bottom-0 lg:top-auto lg:max-w-4xl"
? "floating-composer-edge dashboard-composer-edge fixed bottom-0 z-40 mx-auto max-w-3xl lg:max-w-4xl"
: usesMobileBottomStyle
? cn(
usesPhoneFooterDock
Expand Down
2 changes: 1 addition & 1 deletion src/components/differentials/differential-presentation-workflow-page.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -474,7 +474,7 @@ function MobileCandidateCard({
<span className="min-w-0">
<span className="flex items-center gap-2">
<CandidateGlyph record={candidate.record} className="h-4 w-4 shrink-0 text-[color:var(--text-muted)]" />
<span className="line-clamp-2 text-base font-extrabold leading-5 text-[color:var(--text-heading)]">
<span className="line-clamp-2 break-words text-base font-extrabold leading-5 text-[color:var(--text-heading)]">
{candidate.record.title}
</span>
</span>
Expand Down
19 changes: 12 additions & 7 deletions src/components/master-document-flow-mockups.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -296,11 +296,13 @@ function Pill({
active = false,
tone = "neutral",
icon: Icon,
className,
}: {
children: ReactNode;
active?: boolean;
tone?: "neutral" | "teal" | "green" | "amber" | "blue" | "violet";
icon?: LucideIcon;
className?: string;
}) {
const toneClass =
active || tone === "teal"
Expand All@@ -319,6 +321,7 @@ function Pill({
className={cn(
"inline-flex min-h-7 max-w-full shrink-0 items-center gap-1.5 rounded-md border px-2.5 text-xs font-bold shadow-[var(--shadow-inset)]",
toneClass,
className,
)}
>
{Icon ? <Icon className="h-3.5 w-3.5 shrink-0" aria-hidden="true" /> : null}
Expand DownExpand Up@@ -473,7 +476,7 @@ function MonitoringRowCards({ compact = false }: { compact?: boolean }) {
<article
key={row[0]}
className={cn(
"grid grid-cols-[4rem_minmax(0,1fr)] overflow-hidden rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)]",
"grid grid-cols-[3rem_minmax(0,1fr)] overflow-hidden rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] sm:grid-cols-[4rem_minmax(0,1fr)]",
rowIndex === 1 && "border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)]",
)}
>
Expand All@@ -482,7 +485,7 @@ function MonitoringRowCards({ compact = false }: { compact?: boolean }) {
</div>
<div className={cn("p-3", compact && "p-2.5")}>
<h3 className="text-base font-extrabold text-[color:var(--text-heading)]">{row[0]}</h3>
<dl className="mt-2 grid grid-cols-[7.25rem_minmax(0,1fr)] gap-x-3 gap-y-1 text-sm">
<dl className="mt-2 grid grid-cols-[6rem_minmax(0,1fr)] gap-x-3 gap-y-1 text-sm sm:grid-cols-[7.25rem_minmax(0,1fr)]">
{monitoringTableHeadings.slice(1).map((heading, index) => (
<div key={heading} className="contents">
<dt className="font-bold text-[color:var(--text-muted)]">{heading}</dt>
Expand DownExpand Up@@ -1596,11 +1599,13 @@ function MasterEvidenceDetailContent({
>
<ArrowLeft className="h-6 w-6" aria-hidden="true" />
</Link>
<h1 className="text-2xl font-extrabold text-[color:var(--text-heading)]">Evidence</h1>
<Pill icon={evidenceTypeIconFor(evidence.type)}>
{evidence.label} · p.{evidence.page}
</Pill>
<div className="ml-auto">
<div className="flex min-w-0 flex-1 items-center gap-3">
<h1 className="shrink-0 text-lg font-extrabold text-[color:var(--text-heading)] sm:text-2xl">Evidence</h1>
<Pill className="min-w-0 flex-1" icon={evidenceTypeIconFor(evidence.type)}>
{evidence.label} · p.{evidence.page}
</Pill>
</div>
<div className="ml-auto shrink-0">
<IconButton label="More evidence actions" icon={MoreVertical} />
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/services/service-detail-page.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -554,11 +554,11 @@ export function ServiceDetailPage({ service }: { service: ServiceRecord }) {
<span
key={chip.label ?? `status-chip-${index}`}
className={cn(
"inline-flex min-h-6 items-center gap-1.5 rounded-full border px-2.5 text-2xs font-bold",
"inline-flex min-h-6 items-center gap-1.5 rounded-2xl border px-2.5 py-0.5 text-2xs font-bold",
chipToneClass(chip.tone),
)}
>
<span className="h-1.5 w-1.5 rounded-full bg-current" aria-hidden />
<span className="h-1.5 w-1.5 shrink-0 rounded-full bg-current" aria-hidden />
{displayText(chip.label, "Status")}
</span>
))}
Expand Down