Files

T

JonathanMcCaffrey 1f7a0819fc Playwright start

2026-05-31 14:33:58 -04:00

2.0 KiB

Raw Blame History

type, status, category, isAgentGenerated

type	status	category	isAgentGenerated
Task	AI Gen TODO	QA	true

Test: Mobile Responsive Layout

Description

Verify the Build Calculator and Database pages render correctly on mobile and tablet viewports, with no overlapping elements, truncated text, or unusable controls.

Rationale

The HotkeyViewerComponent.razor contains a @media (max-width: 1025px) rule that scales the key container with transform: scale(0.85) and hides the background color. This responsive behavior is entirely CSS-driven and has zero functional test coverage. A CSS refactor could easily break this breakpoint without any existing test noticing.

Playwright Feature

This test uses test.use({ viewport }) with device-specific viewport sizes. Playwright provides built-in device descriptors via devices['iPhone 13'], devices['Pixel 5'], and devices['iPad Pro 11'].

Implementation

// Use the built-in iPhone 13 descriptor
const iPhone = devices['iPhone 13'];
test.use({ ...iPhone });

test('Build Calculator is usable on mobile', async ({ page }) => {
  // Navigate, filter, click Q — same actions as desktop test
  // but the assertions now validate mobile layout works
});

What to Assert (Desktop-equivalent on Mobile)

All 19 hotkey buttons are present and clickable.
Font size is legible (no single-character truncation on key labels).
Entity names are readable (not clipped by the scaler).
The filter <select> elements are fully visible and functional (not hidden behind the keyboard view).
The timeline grid scrolls horizontally without breaking the layout.
No horizontal scrollbar appears on the <body> (content fits within viewport).

Additional Device Targets

Descriptor	Type	Purpose
`iPhone 13`	390×844	Modern mobile portrait
`Pixel 5`	393×851	Android mobile portrait
`iPad Pro 11`	834×1194	Tablet landscape/portrait breakpoints
Custom `{ width: 1024, height: 768 }`	1024×768	Exact `@media (max-width: 1025px)` boundary test

2.0 KiB Raw Blame History Unescape Escape