Problem
The Profile page has d-flex gap-2 button groups (Profile.razor lines 68, 81) that render multiple buttons in a row. On mobile, when these buttons wrap to a second line, the visual grouping breaks -- buttons appear scattered rather than intentionally stacked.
Affected Page(s)
Expected Behavior
Button groups should stack vertically on mobile with full-width buttons, or use a more mobile-friendly pattern.
Suggested Fix
Use flex-column on mobile: d-flex flex-column flex-md-row gap-2
This stacks buttons vertically on small screens and keeps them in a row on desktop.
File: src/SentenceStudio.UI/Pages/Profile.razor lines 68, 81
Priority
Low -- Functional but visually broken edge case on mobile.
Problem
The Profile page has d-flex gap-2 button groups (Profile.razor lines 68, 81) that render multiple buttons in a row. On mobile, when these buttons wrap to a second line, the visual grouping breaks -- buttons appear scattered rather than intentionally stacked.
Affected Page(s)
Expected Behavior
Button groups should stack vertically on mobile with full-width buttons, or use a more mobile-friendly pattern.
Suggested Fix
Use flex-column on mobile: d-flex flex-column flex-md-row gap-2
This stacks buttons vertically on small screens and keeps them in a row on desktop.
File: src/SentenceStudio.UI/Pages/Profile.razor lines 68, 81
Priority
Low -- Functional but visually broken edge case on mobile.