detail
Two screenshots (phone + tablet) showed real problems. (1) .wrap had a hardcoded max-width:480px with no responsive scaling -- fine on a phone (near full-width already) but left the tablet screenshot showing a narrow centered column with large unused margins on both sides. Added two breakpoints (700px->640px, 1000px->820px) so wider screens actually use their space; phones under 700px viewport width are completely unaffected. (2) The tablet screenshot also showed a real leftover bug: two separate 'Sugar' entries (10g and 25g) both still on the Add-ins list, each with their own suggested-label and delete button -- this is stale duplicate DATA from before the replace-on-readd fix (D828) existed, most likely compounded by the same stale-PWA-cache issue (D830) meaning that device was running old code when both entries got created. Code-level fixes for future duplicates already exist (D828), but existing bad data doesn't self-heal -- added dedupeAddIns(), runs at the start of every renderAddIns() call, keeps the most recent entry per ingredient name and silently drops earlier duplicates.