A cookbook is used in a kitchen, with one hand, on a phone propped against the toaster. The desktop layout did not survive that.
The phone shell
Below 720 pixels wide the app changes shape rather than just squeezing:
- The header shrinks. The full header is 211 pixels tall with title, search, and filter chips. On scroll it collapses to a 61-pixel bar with just the search field, so the recipe list keeps the screen.
- Filters move to a sheet. Tags, time, and course filters open in a bottom sheet instead of a sidebar.
- A bottom nav replaces the top tabs: Recipes, Shopping, Plan, and Options sit under the thumb.
- PWA install. A manifest and service worker let the app be added to the home screen and opened full-screen.
The Options panel
The same day brought a settings panel with three tabs, each with presets and segmented controls rather than sliders:
- Theme. Light, dark, and a few tinted presets.
- Fonts. Serif, sans, and mono pairings at three sizes.
- Layout. Card density and list versus grid.
Presets per tab mean a person picks a look in two taps and can still fine-tune. Everything is stored per user and travels with the account once sign-in arrived.