fix(header): prevent mobile header overflow

Reduce responsive padding and gaps below 640 px, move nav labels to
lg breakpoint, and position the "view as" badge absolutely to prevent
horizontal scroll on narrow phones (360-414 px).

src/pages/AdminBroadcastPage.jsx

@@ -189,7 +189,7 @@ export default function AdminBroadcastPage() {
 
                         <div className="space-y-2">
                             <p className="text-sm font-medium">{t('ADMIN_BROADCAST.RECIPIENTS')}</p>
-                            <div className="flex gap-2">
+                            <div className="flex flex-wrap gap-2">
                                 {['all', 'picked'].map((value) => (
                                     <Button key={value} type="button" variant={mode === value ? 'default' : 'outline'}
                                             aria-pressed={mode === value} onClick={() => setMode(value)}>