Mobile UX: Vocabulary page has overwhelming toolbar density on mobile #106
Description
Problem
The Vocabulary page renders 4-5 rows of controls above the actual vocabulary content on mobile:
- Stats bar: 5 badge pills + view mode toggle buttons
- (Conditional) Bulk edit toolbar: 6 interactive elements
- Search input + clear button
- (Conditional) Active filter chips
- Dropdown filter row: up to 7 select elements (160-220px each)
On iPhone 11, this pushes the vocabulary cards below the fold. Only ~277px remains for actual vocabulary cards -- roughly 1.5 cards visible.
Affected Page(s)
/vocabulary
Suggested Fix
- Hide stats bar on mobile (
d-none d-md-flex) - Replace filter dropdowns with a single Filter button that opens a bottom sheet on mobile
- Keep search bar and view mode toggle visible
File: src/SentenceStudio.UI/Pages/Vocabulary.razor lines 34-200
Priority
HIGH -- The vocabulary list is a core feature; on mobile you can barely see any vocabulary words.