Improve episode/movie mapping UI for mobile #1

New issue

Open

opened 2026-05-27 09:20:57 -07:00 by pyr0ball · 0 comments

pyr0ball commented

2026-05-27 09:20:57 -07:00

Owner

Problem

The disc title → Sonarr/Radarr mapping step in the web UI is the most interactive part of the workflow and currently assumes a desktop layout. On mobile or a tablet (e.g. couch use while disc is ripping), the UI is hard to use:

Dropdowns and input fields are cramped
No touch-friendly target sizing
Multi-title lists scroll awkwardly on small screens

What good looks like

Card-per-title layout on narrow viewports
Tap targets sized to WCAG 2.1 minimum (44x44px)
Sonarr/Radarr match dropdown replaced with a searchable modal or bottom sheet on mobile
Swipe or large tap to confirm each mapping

Context

No framework constraint — the UI is vanilla HTML/CSS/JS. A CSS breakpoint + some layout changes should cover the basics without a rewrite.

## Problem The disc title → Sonarr/Radarr mapping step in the web UI is the most interactive part of the workflow and currently assumes a desktop layout. On mobile or a tablet (e.g. couch use while disc is ripping), the UI is hard to use: - Dropdowns and input fields are cramped - No touch-friendly target sizing - Multi-title lists scroll awkwardly on small screens ## What good looks like - Card-per-title layout on narrow viewports - Tap targets sized to WCAG 2.1 minimum (44x44px) - Sonarr/Radarr match dropdown replaced with a searchable modal or bottom sheet on mobile - Swipe or large tap to confirm each mapping ## Context No framework constraint — the UI is vanilla HTML/CSS/JS. A CSS breakpoint + some layout changes should cover the basics without a rewrite.