--- type: Task status: AI Gen TODO category: QA isAgentGenerated: "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 ```js // 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 `