diff --git a/src/components/AppHeader.jsx b/src/components/AppHeader.jsx
index fb443fd..9bd43a1 100644
--- a/src/components/AppHeader.jsx
+++ b/src/components/AppHeader.jsx
@@ -36,7 +36,7 @@ const NAV_ITEMS = [
 ];
 
 const navLinkClass = (isActive) => cn(
-    'flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+    'flex items-center gap-2 rounded-lg px-2 py-2 text-sm font-medium transition-colors sm:px-3',
     isActive
         ? 'bg-accent text-accent-foreground'
         : 'text-muted-foreground hover:bg-muted hover:text-foreground',
@@ -104,28 +104,29 @@ export default function AppHeader({isAuthenticated, onLogout}) {
 
     return (
         <header className="sticky top-0 z-50 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-            <PageContainer className="flex h-16 items-center gap-2 px-4 md:px-8">
-                <Link to={isAuthenticated ? '/dashboard' : '/'} aria-label="ToBePlayed" className="mr-2 flex items-center gap-2 font-bold tracking-tight whitespace-nowrap">
+            <PageContainer className="flex h-16 items-center gap-1 px-4 sm:gap-2 md:px-8">
+                <Link to={isAuthenticated ? '/dashboard' : '/'} aria-label="ToBePlayed" className="flex items-center gap-2 font-bold tracking-tight sm:mr-2 whitespace-nowrap">
                     <Logo className="h-8 w-auto shrink-0"/>
                     {/* On a narrow phone the menu and buttons need the room; the logo alone stays. */}
-                    <span className="hidden text-lg min-[380px]:inline">ToBePlayed</span>
+                    <span className="hidden text-lg min-[520px]:inline">ToBePlayed</span>
                 </Link>
 
                 {isAuthenticated && (
-                    <nav className="flex items-center gap-1">
+                    <nav className="flex items-center sm:gap-1">
                         {NAV_ITEMS.map(({to, labelKey, Icon, alsoActiveOn = []}) => (
                             <NavLink key={to} to={to} title={t(labelKey)}
                                      className={({isActive}) => navLinkClass(isActive || alsoActiveOn.includes(pathname))}>
                                 <Icon className="size-4"/>
-                                <span className="hidden sm:inline">{t(labelKey)}</span>
+                                <span className="hidden lg:inline">{t(labelKey)}</span>
                             </NavLink>
                         ))}
                     </nav>
                 )}
 
                 <div className="ml-auto flex items-center gap-1">
+                    {/* Below md the badge hangs on the header's bottom edge: in the row it would push the page sideways. */}
                     {isAuthenticated && viewingAs && (
-                        <Badge variant="secondary" className="mr-1">{t('NAV.VIEW_AS.BADGE', {role: t(`ROLES.${viewingAs}`)})}</Badge>
+                        <Badge variant="secondary" className="max-md:absolute max-md:top-full max-md:left-1/2 max-md:-translate-x-1/2 max-md:-translate-y-1/2 max-md:pointer-events-none max-md:border-border md:mr-1">{t('NAV.VIEW_AS.BADGE', {role: t(`ROLES.${viewingAs}`)})}</Badge>
                     )}
                     {isAuthenticated && wallet && (
                         <Button asChild variant="ghost" size="sm" title={t('POINTS.TITLE')}>
diff --git a/src/components/AppHeader.test.jsx b/src/components/AppHeader.test.jsx
index bda98f3..3abfa31 100644
--- a/src/components/AppHeader.test.jsx
+++ b/src/components/AppHeader.test.jsx
@@ -36,7 +36,7 @@ describe('AppHeader', () => {
         await vi.waitFor(() => expect(toast.error).toHaveBeenCalledWith('SETTINGS.ERROR_SAVE'));
     });
 
-    // jsdom applies no media queries, so the test hides the name the way the 380px breakpoint does.
+    // jsdom applies no media queries, so the test hides the name the way the 520px breakpoint does.
     it('keeps a name on the home link when a narrow phone hides the app name', () => {
         fetchRoutes({});
         renderWithProviders(<AppHeader isAuthenticated={false} onLogout={() => {}}/>);
diff --git a/src/pages/AdminBroadcastPage.jsx b/src/pages/AdminBroadcastPage.jsx
index 3e4bc43..1742cdb 100644
--- a/src/pages/AdminBroadcastPage.jsx
+++ b/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)}>