[fee25542] fix(a11y): re-land sub-36px touch target and overflow fixes after sync_branch reset them again

Re-applies the fda2ac0c fix content a third time -- sync_branch's
rebase+force-push reset the branch and working tree back to the stale
f9f45d9f ref (the round-1-only state) instead of preserving the local
commits ahead of it, discarding the round-2 fix yet again.

- quick-actions-card.tsx (Overview dashboard customize dialog): reorder
  arrows drop the h-6 w-6 override, falling back to Button's 36px icon
  default
- agent-card.tsx (Agents page grid): DM / dedicated-chat / actions-menu
  icon buttons drop their h-6 w-6 override, now 36px
- product-card-grid.tsx / project-card-grid.tsx (Products/Projects card
  view): edit/external-link icon buttons drop h-6 w-6, now 36px
- environment-ladder-editor.tsx (Edit Project dialog): move-up/move-down/
  remove-rung icon buttons drop their h-6/h-8 overrides, now 36px; the
  per-rung row now scrolls horizontally within its own bordered box
  (overflow-x-auto + min-w-max) instead of overflowing at 375px now
  that the icon buttons are back to full width
- acceptance-criteria-editor.tsx / dependency-selector.tsx (task create/
  edit dialogs): remove-row icon buttons drop their h-6/h-8 overrides,
  now 36px
- tab-commits.tsx: "Linked Commits" header's fixed 3-column grid now
  stacks to one column below sm, and the branch/PR badge row scrolls
  horizontally in its own container instead of the page

panel lint + tsc --noEmit are both clean.
This commit is contained in:
Frontend Developer 1
2026-07-24 11:24:13 +00:00
parent f9f45d9f5f
commit e6bee7c876
8 changed files with 10 additions and 17 deletions
+1 -3
View File
@@ -114,7 +114,6 @@ export function AgentCard({ agent, agentStatus, usageRow }: AgentCardProps) {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-6 w-6"
aria-label="DM this agent" aria-label="DM this agent"
title="DM this agent" title="DM this agent"
onClick={() => onClick={() =>
@@ -130,7 +129,6 @@ export function AgentCard({ agent, agentStatus, usageRow }: AgentCardProps) {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-6 w-6"
aria-label={dedicatedChat.label} aria-label={dedicatedChat.label}
title={dedicatedChat.label} title={dedicatedChat.label}
onClick={() => router.push(dedicatedChat.href)} onClick={() => router.push(dedicatedChat.href)}
@@ -145,7 +143,7 @@ export function AgentCard({ agent, agentStatus, usageRow }: AgentCardProps) {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-6 w-6 shrink-0" className="shrink-0"
aria-label="Agent actions" aria-label="Agent actions"
title="Agent actions" title="Agent actions"
> >
@@ -163,7 +163,6 @@ function QuickActionsCustomizeDialog() {
type="button" type="button"
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-6 w-6"
disabled={isFirst} disabled={isFirst}
onClick={() => move(id, -1)} onClick={() => move(id, -1)}
aria-label={`Move ${action.label} earlier`} aria-label={`Move ${action.label} earlier`}
@@ -181,7 +180,6 @@ function QuickActionsCustomizeDialog() {
type="button" type="button"
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-6 w-6"
disabled={isLast} disabled={isLast}
onClick={() => move(id, 1)} onClick={() => move(id, 1)}
aria-label={`Move ${action.label} later`} aria-label={`Move ${action.label} later`}
@@ -67,7 +67,7 @@ export function ProductCardGrid({ products, isLoading }: ProductCardGridProps) {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-6 w-6 shrink-0" className="shrink-0"
onClick={() => setEditingProductId(product.id)} onClick={() => setEditingProductId(product.id)}
aria-label="Edit product" aria-label="Edit product"
> >
@@ -75,7 +75,7 @@ export function EnvironmentLadderEditor({
</div> </div>
{items.length > 0 && ( {items.length > 0 && (
<div className="space-y-2 border rounded-lg p-3 bg-muted/30"> <div className="space-y-2 overflow-x-auto border rounded-lg p-3 bg-muted/30">
{items.map((rung, index) => { {items.map((rung, index) => {
const isFirst = index === 0; const isFirst = index === 0;
const isLast = index === items.length - 1; const isLast = index === items.length - 1;
@@ -94,7 +94,7 @@ export function EnvironmentLadderEditor({
promotes to promotes to
</div> </div>
)} )}
<div className="flex items-center gap-2"> <div className="flex min-w-max items-center gap-2">
<div className="flex flex-col"> <div className="flex flex-col">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
@@ -106,7 +106,6 @@ export function EnvironmentLadderEditor({
type="button" type="button"
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-6 w-6"
disabled={isFirst} disabled={isFirst}
onClick={() => handleMove(index, -1)} onClick={() => handleMove(index, -1)}
aria-label="Move earlier in the flow" aria-label="Move earlier in the flow"
@@ -128,7 +127,6 @@ export function EnvironmentLadderEditor({
type="button" type="button"
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-6 w-6"
disabled={isLast} disabled={isLast}
onClick={() => handleMove(index, 1)} onClick={() => handleMove(index, 1)}
aria-label="Move later in the flow" aria-label="Move later in the flow"
@@ -181,7 +179,7 @@ export function EnvironmentLadderEditor({
type="button" type="button"
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-8 w-8 shrink-0" className="shrink-0"
onClick={() => handleRemove(index)} onClick={() => handleRemove(index)}
aria-label="Remove this rung" aria-label="Remove this rung"
> >
@@ -79,7 +79,6 @@ export function ProjectCardGrid({ projects, isLoading }: ProjectCardGridProps) {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-6 w-6"
onClick={() => setEditingProjectId(project.id)} onClick={() => setEditingProjectId(project.id)}
aria-label="Edit project" aria-label="Edit project"
> >
@@ -87,7 +86,7 @@ export function ProjectCardGrid({ projects, isLoading }: ProjectCardGridProps) {
</Button> </Button>
</HelpTip> </HelpTip>
<HelpTip label="Open the git repository in a new tab"> <HelpTip label="Open the git repository in a new tab">
<Button variant="ghost" size="icon" className="h-6 w-6" asChild> <Button variant="ghost" size="icon" asChild>
<a <a
href={getExternalUrl(project)} href={getExternalUrl(project)}
target="_blank" target="_blank"
@@ -96,7 +96,7 @@ export function AcceptanceCriteriaEditor({
type="button" type="button"
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-8 w-8 shrink-0" className="shrink-0"
onClick={() => handleRemove(index)} onClick={() => handleRemove(index)}
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
@@ -99,7 +99,7 @@ export function DependencySelector({
type="button" type="button"
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-6 w-6 shrink-0" className="shrink-0"
onClick={() => removeTask(task.id)} onClick={() => removeTask(task.id)}
> >
<X className="h-3 w-3" /> <X className="h-3 w-3" />
@@ -114,7 +114,7 @@ export function TabCommits({ task }: TabCommitsProps) {
return ( return (
<Card> <Card>
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="grid grid-cols-3 items-center gap-4"> <div className="grid grid-cols-1 items-center gap-2 sm:grid-cols-3 sm:gap-4">
<HelpTip label="Commits attributed to this task — new ones link automatically as devs push"> <HelpTip label="Commits attributed to this task — new ones link automatically as devs push">
<CardTitle className="text-lg flex items-center gap-2 w-fit"> <CardTitle className="text-lg flex items-center gap-2 w-fit">
<GitCommit className="h-5 w-5" /> <GitCommit className="h-5 w-5" />
@@ -124,7 +124,7 @@ export function TabCommits({ task }: TabCommitsProps) {
</span> </span>
</CardTitle> </CardTitle>
</HelpTip> </HelpTip>
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-start gap-2 overflow-x-auto sm:justify-center">
{task.branch_name && ( {task.branch_name && (
<HelpTip label="Git branch this task is being worked on"> <HelpTip label="Git branch this task is being worked on">
<Badge <Badge