FIX Improve mobile touch targets

[romanlutz]

Description

At a 390x844 viewport, several reachable frontend controls exposed hit areas below the recommended 44x44 size, making them harder to activate reliably on touch devices.

This change adds shared mobile-only touch-target primitives and applies them across Home and Labels, Configuration, tour actions, Chat, and History. The sizing activates only at widths up to 600px, preserving desktop density and the existing 44x44 sidebar controls. Focused geometry coverage verifies each adjusted control group, mobile reflow without document-level horizontal overflow, and representative desktop behavior.

Tour viewport containment and clipping remain intentionally unchanged because they are outside this fix's scope.

N/A - this change is not breaking.

Tests and Documentation

• 13 targeted Jest suites: 364 tests passed
• 4 focused Playwright tests passed for 390x844 mobile geometry/reflow and representative desktop sizing
• ESLint, TypeScript type checking, and the production frontend build passed
• Documentation: N/A; no public API or documented behavior changed

JupyText: N/A; this is a frontend-only change.

[Copilot]

Pull request overview

This PR improves mobile usability in the PyRIT frontend by enforcing a minimum 44×44px touch target size for key interactive controls at widths ≤600px, while preserving existing compact desktop sizing. It does this via shared style primitives and applies them across Home, Labels, Configuration, Tour, Chat, and History, with Playwright coverage verifying mobile geometry/reflow and representative desktop behavior.

Changes:

• Introduces shared mobile-only touch target style primitives (mobileTouchTarget, mobileTouchTargetHeight) and constants in frontend/src/styles/touchTargets.ts.
• Applies those primitives to numerous buttons/inputs across the UI (Home, Labels, Configuration, Tour actions, Chat controls, History controls).
• Adds a new Playwright E2E suite to validate minimum hit areas on mobile, no horizontal overflow, and preserved compact sizing on desktop.

Reviewed changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
frontend/src/styles/touchTargets.ts	Adds shared mobile breakpoint + minimum touch target size primitives for reuse across components.
frontend/src/components/Tour/TourTooltip.tsx	Applies mobile touch target styling to Joyride tour action buttons.
frontend/src/components/Tour/TourTooltip.styles.ts	Introduces actionButton style using shared mobile touch target primitive.
frontend/src/components/Labels/LabelsBar.styles.ts	Ensures the labels icon button meets minimum touch size on mobile.
frontend/src/components/Home/Home.tsx	Applies touch-target class to key Home CTA buttons.
frontend/src/components/Home/Home.styles.ts	Adds reusable touchTarget and applies minimum touch height to operation rows on mobile.
frontend/src/components/History/HistoryPagination.tsx	Ensures pagination buttons meet minimum touch height on mobile.
frontend/src/components/History/HistoryFiltersBar.tsx	Ensures “Reset all filters” button meets minimum touch height on mobile.
frontend/src/components/History/AttackTable.tsx	Ensures “Open attack” icon button meets minimum touch size on mobile.
frontend/src/components/History/AttackHistory.tsx	Ensures refresh/retry actions meet minimum touch height on mobile.
frontend/src/components/History/AttackHistory.styles.ts	Applies shared primitives to filter dropdowns and adds touch target utility styles.
frontend/src/components/Config/TargetTable.tsx	Ensures target table row action buttons meet minimum touch target size on mobile.
frontend/src/components/Config/TargetTable.styles.ts	Applies shared primitives to select/action elements and refines mobile sizing.
frontend/src/components/Config/TargetConfig.tsx	Ensures “New Target” CTA meets minimum touch target size on mobile.
frontend/src/components/Config/TargetConfig.styles.ts	Uses shared breakpoint/size constants and adds a touch-target style helper.
frontend/src/components/Chat/MessageList.tsx	Moves inline styles to a class to support mobile touch target sizing for message action buttons.
frontend/src/components/Chat/MessageList.styles.ts	Adds message action button styling and wraps actions on mobile for better touch usability.
frontend/src/components/Chat/ConversationPanel.tsx	Ensures panel header/retry/star controls meet mobile touch target sizing.
frontend/src/components/Chat/ConversationPanel.styles.ts	Adds shared touch target styling for header/star buttons and retry button height.
frontend/src/components/Chat/ChatWindow.tsx	Ensures ribbon action button meets minimum mobile touch target sizing.
frontend/src/components/Chat/ChatWindow.styles.ts	Applies shared touch target primitive to ribbon and “New attack” controls.
frontend/src/components/Chat/ChatInputArea.tsx	Adds optional buttonClassName to status banners to apply touch target sizing to banner CTAs.
frontend/src/components/Chat/ChatInputArea.styles.ts	Applies mobile touch target sizing to input area controls and adds a reusable touchTarget class.
frontend/e2e/touch-targets.spec.ts	Adds Playwright coverage for mobile touch target geometry, no horizontal overflow, and preserved desktop compact sizing.