UI breaks on mid-size screens (iPad / tablet widths) on the Tasks page #221
Description
The layout on the Tasks page breaks on mid-sized screen widths (mainly tablet sizes).
At viewports around 768px–900px, the header actions (Add Task, Sync) shift outside the container and overflow toward the right. The filter row also loses alignment.
This happens consistently on devices like iPad Air, iPad Mini, and Surface-type screens.
To Reproduce
Go to /home#tasks
Resize the browser window to a width between 768px–900px
(or select iPad / tablet presets in DevTools)
Look at the top row containing filters and the Add Task / Sync buttons
The layout will overflow out of the container
Expected behavior
The layout should remain responsive across tablet widths.
Buttons and filters should either wrap or adjust spacing without overflowing outside the main container.
Screenshots
=> Video
Screencast.from.2025-11-25.19-11-26.mp4
Desktop
OS: Ubuntu
Browser: Chrome
Affected widths: 768px–900px
Tablet
iPad Air (820px)
iPad Mini (768px)
Surface Pro 7 (912px)
Additional context
Other breakpoints (mobile and large desktop) look fine.
The issue seems isolated to the md → lg breakpoint range.