52 lines
2.0 KiB
Markdown
52 lines
2.0 KiB
Markdown
---
|
||
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 |
|