fix(layout): fit names on phones without sideways scroll

Display and game names shrink to 0.875rem, then end with an ellipsis
(FitText + fit-text utility, CSS container units, full text in title).
Rows and buttons wrap at large fonts, header points chip can shrink.
Guard: scripts/check-overflow.js.

src/pages/AdminBroadcastPage.jsx

@@ -18,6 +18,7 @@ import {Input} from '@/components/ui/input';
 import {Label} from '@/components/ui/label';
 import {Textarea} from '@/components/ui/textarea';
 import PageContainer from '../components/PageContainer.jsx';
+import FitText from '../components/FitText.jsx';
 import {fetchUsers} from '../utils/admin.js';
 import {fetchBroadcasts, fetchRecipientCount, sendBroadcast, sendTestBroadcast} from '../utils/broadcasts.js';
 import {formatDateTime} from '../utils/format.js';
@@ -218,12 +219,12 @@ export default function AdminBroadcastPage() {
                                 {found.length > 0 && (
                                     <ul className="space-y-1">
                                         {found.map((user) => (
-                                            <li key={user.id}>
-                                                <label className="flex items-center gap-2 text-sm">
-                                                    <input type="checkbox" className="accent-primary"
+                                            <li key={user.id} className="@container">
+                                                <label className="flex min-w-0 items-center gap-2 text-sm">
+                                                    <input type="checkbox" className="shrink-0 accent-primary"
                                                            checked={picked.some((p) => p.id === user.id)}
                                                            onChange={() => toggle(user)}/>
-                                                    {[user.email, user.displayName].filter(Boolean).join(' · ')}
+                                                    <FitText className="min-w-0 flex-1" text={[user.email, user.displayName].filter(Boolean).join(' · ')}/>
                                                 </label>
                                             </li>
                                         ))}
@@ -235,9 +236,9 @@ export default function AdminBroadcastPage() {
                                 {picked.length > 0 && (
                                     <ul className="flex flex-wrap gap-2">
                                         {picked.map((user) => (
-                                            <li key={user.id} className="flex items-center gap-1 rounded-md border px-2 py-1 text-sm">
-                                                {user.email}
-                                                <button type="button" aria-label={`${t('ADMIN_BROADCAST.REMOVE')} ${user.email}`}
+                                            <li key={user.id} className="flex min-w-0 max-w-full items-center gap-1 rounded-md border px-2 py-1 text-sm">
+                                                <span className="min-w-0 truncate" title={user.email}>{user.email}</span>
+                                                <button type="button" className="shrink-0" aria-label={`${t('ADMIN_BROADCAST.REMOVE')} ${user.email}`}
                                                         onClick={() => toggle(user)}>
                                                     <X className="size-3"/>
                                                 </button>