rafraa/TX
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve tap target size for attendee elements on touch devices

Browse Source 
Adjusted CSS for attendee elements to increase tap target size by adding padding and min-height, improving usability on touch devices like iPads.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 54d6551d-3f41-47b7-aad2-35c81e5d9b06
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/n3Cg2XG
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
riyadhafraa
2026-04-29 12:44:58 +00:00
parent b5de44485e
commit 3634769117
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/tx-os/src/pages/executive-meetings.tsx
+8 -6
View File
@@ -2241,7 +2241,7 @@ function AddAttendeeChip({
type="button"
onClick={onClick}
data-testid={testId}
className="inline-flex items-center rounded-full border border-dashed border-blue-400 px-2 py-0.5 text-xs text-blue-700 hover:bg-blue-50 hover:border-blue-500 transition-colors"
className="inline-flex items-center rounded-full border border-dashed border-blue-400 px-2.5 py-1 min-h-[1.5rem] text-xs text-blue-700 hover:bg-blue-50 hover:border-blue-500 transition-colors"
>
{label}
</button>
@@ -2322,9 +2322,11 @@ function AttendeeFlow({
placeholder="…"
// Always-visible dashed underline gives each attendee name a
// discoverable click target even when names wrap onto multiple
// lines. Hidden in edit mode (the editor draws its own border)
// and on print.
className="inline-block align-baseline min-w-[3rem] px-0.5 border-b border-dashed border-gray-400/70 hover:border-blue-500 data-[editing=true]:border-b-0 print:border-b-0"
// lines. The vertical padding + min-height widen the tap
// target so a near-miss tap on an iPad/touch device still
// lands on the editor. Hidden in edit mode (the editor draws
// its own border) and on print.
className="inline-block align-baseline min-w-[3rem] min-h-[1.5rem] px-0.5 py-0.5 border-b border-dashed border-gray-400/70 hover:border-blue-500 data-[editing=true]:border-b-0 print:border-b-0 print:py-0 print:min-h-0"
testId={`em-edit-attendee-${i}`}
/>
) : (
@@ -2344,7 +2346,7 @@ function AttendeeFlow({
ariaLabel={newAriaLabel}
dir="auto"
placeholder="…"
className="inline-block align-baseline min-w-[6rem] px-0.5 border-b border-dashed border-blue-500 data-[editing=true]:border-b-0 print:border-b-0"
className="inline-block align-baseline min-w-[6rem] min-h-[1.5rem] px-0.5 py-0.5 border-b border-dashed border-blue-500 data-[editing=true]:border-b-0 print:border-b-0 print:py-0 print:min-h-0"
testId={`em-add-attendee-pending-input-${addType}`}
startInEditMode
// Force a save call on blur even when the user typed nothing,
@@ -2362,7 +2364,7 @@ function AttendeeFlow({
onClick={() => onStartAdd!(addType)}
data-testid={`em-add-attendee-${addType}`}
aria-label={addLabel}
className="text-xs text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded px-1.5 py-0.5 border border-dashed border-blue-300 hover:border-blue-500 transition-colors"
className="text-xs text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded px-2 py-1 min-h-[1.5rem] border border-dashed border-blue-300 hover:border-blue-500 transition-colors"
>
{addLabel}
</button>