---
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 `<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 |
