fix: mobile responsiveness for all admin pages

- DataTable: overflow-x-auto on table wrapper (affects users, rooms, tickets)
- Radio: overflow-x-auto wrappers around all 3 tables (shouts, applications, schedules)
- Catalog items: responsive grids (grid-cols-1 sm:grid-cols-3) in Add/Edit dialogs
- Catalog tabs: TabsList overflow-x-auto for narrow screens
- Import clone: pagination flex-wrap to prevent overlap on small screens

src/app/admin/catalog/[id]/catalog-detail-tabs.tsx

@@ -69,7 +69,7 @@ export function CatalogDetailTabs({
 }: CatalogDetailTabsProps) {
 	return (
 		<Tabs defaultValue="settings">
-			<TabsList>
+			<TabsList className="overflow-x-auto flex-nowrap w-full">
 				<TabsTrigger value="settings" className="gap-2">
 					<Settings className="h-4 w-4" />
 					Settings

src/app/admin/import/clone/import-clone-client.tsx

@@ -876,7 +876,7 @@ function FurniGrid({ source }: FurniGridProps) {
 
 			{/* Pagination */}
 			{total > PER_PAGE && (
-				<div className="flex items-center justify-between">
+				<div className="flex items-center justify-between flex-wrap gap-2">
 					<span className="text-sm text-muted-foreground">
 						Page {page} / {lastPage}
 					</span>

src/app/admin/radio/page.tsx

@@ -34,7 +34,6 @@ type Schedule = {
 	isActive: boolean;
 };
 
-
 function formatTime(d: Date | null): string {
 	return d ? d.toISOString().slice(11, 16) : "\u2014";
 }
@@ -108,22 +107,14 @@ export default async function AdminRadioPage() {
 	return (
 		<main>
 			<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
-				<StatusCard
+				<StatusCard label={t("shouts")} value={shouts.length} icon="📣" />
-					label={t("shouts")}
-					value={shouts.length}
-					icon="📣"
-				/>
 				<StatusCard
 					label={t("pendingApplications")}
 					value={pendingApps}
 					state={pendingApps > 0 ? "warn" : "ok"}
 					icon="📝"
 				/>
-				<StatusCard
+				<StatusCard label={t("schedules")} value={schedules.length} icon="🗓️" />
-					label={t("schedules")}
-					value={schedules.length}
-					icon="🗓️"
-				/>
 				<StatusCard
 					label={t("activeSchedules")}
 					value={activeSchedules}
@@ -141,39 +132,41 @@ export default async function AdminRadioPage() {
 						{t("noShouts")}
 					</p>
 				) : (
-					<table>
+					<div className="overflow-x-auto">
-						<thead>
+						<table>
-							<tr>
+							<thead>
-								<th>ID</th>
+								<tr>
-								<th>{t("user")}</th>
+									<th>ID</th>
-								<th>{t("message")}</th>
+									<th>{t("user")}</th>
-								<th>{t("posted")}</th>
+									<th>{t("message")}</th>
-								<th />
+									<th>{t("posted")}</th>
-							</tr>
+									<th />
-						</thead>
-						<tbody>
-							{shouts.map((s) => (
-								<tr key={String(s.id)}>
-									<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
-										{String(s.id)}
-									</td>
-									<td>{String(s.userId)}</td>
-									<td>{s.message}</td>
-									<td className="text-sm theme-text-muted dark:theme-text-muted">
-										{formatDate(s.createdAt, "datetime", "\u2014")}
-									</td>
-									<td>
-										<form action={deleteShout}>
-											<input type="hidden" name="id" value={String(s.id)} />
-											<button type="submit" className="btn btn-danger">
-												{t("deleteShout")}
-											</button>
-										</form>
-									</td>
 								</tr>
-							))}
+							</thead>
-						</tbody>
+							<tbody>
-					</table>
+								{shouts.map((s) => (
+									<tr key={String(s.id)}>
+										<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
+											{String(s.id)}
+										</td>
+										<td>{String(s.userId)}</td>
+										<td>{s.message}</td>
+										<td className="text-sm theme-text-muted dark:theme-text-muted">
+											{formatDate(s.createdAt, "datetime", "\u2014")}
+										</td>
+										<td>
+											<form action={deleteShout}>
+												<input type="hidden" name="id" value={String(s.id)} />
+												<button type="submit" className="btn btn-danger">
+													{t("deleteShout")}
+												</button>
+											</form>
+										</td>
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
 				)}
 			</section>
 
@@ -186,42 +179,44 @@ export default async function AdminRadioPage() {
 						{t("noApplications")}
 					</p>
 				) : (
-					<table>
+					<div className="overflow-x-auto">
-						<thead>
+						<table>
-							<tr>
+							<thead>
-								<th>ID</th>
+								<tr>
-								<th>{t("user")}</th>
+									<th>ID</th>
-								<th>{t("realName")}</th>
+									<th>{t("user")}</th>
-								<th>{t("age")}</th>
+									<th>{t("realName")}</th>
-								<th>{t("style")}</th>
+									<th>{t("age")}</th>
-								<th>Discord</th>
+									<th>{t("style")}</th>
-								<th>{t("status")}</th>
+									<th>Discord</th>
-								<th>{t("applied")}</th>
+									<th>{t("status")}</th>
-							</tr>
+									<th>{t("applied")}</th>
-						</thead>
-						<tbody>
-							{applications.map((a) => (
-								<tr key={String(a.id)}>
-									<td>{String(a.id)}</td>
-									<td>{String(a.userId)}</td>
-									<td>{a.realName}</td>
-									<td>{a.age}</td>
-									<td>{a.musicStyle ?? "\u2014"}</td>
-									<td>{a.discordUsername ?? "\u2014"}</td>
-									<td>
-										<span
-											className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === "ok" ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : statusBadgeClass(a.status) === "danger" ? "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-accent)]/18 text-[var(--admin-text)]"}`}
-										>
-											{a.status}
-										</span>
-									</td>
-									<td className="text-sm theme-text-muted dark:theme-text-muted">
-										{formatDate(a.createdAt, "datetime", "\u2014")}
-									</td>
 								</tr>
-							))}
+							</thead>
-						</tbody>
+							<tbody>
-					</table>
+								{applications.map((a) => (
+									<tr key={String(a.id)}>
+										<td>{String(a.id)}</td>
+										<td>{String(a.userId)}</td>
+										<td>{a.realName}</td>
+										<td>{a.age}</td>
+										<td>{a.musicStyle ?? "\u2014"}</td>
+										<td>{a.discordUsername ?? "\u2014"}</td>
+										<td>
+											<span
+												className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === "ok" ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : statusBadgeClass(a.status) === "danger" ? "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-accent)]/18 text-[var(--admin-text)]"}`}
+											>
+												{a.status}
+											</span>
+										</td>
+										<td className="text-sm theme-text-muted dark:theme-text-muted">
+											{formatDate(a.createdAt, "datetime", "\u2014")}
+										</td>
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
 				)}
 			</section>
 
@@ -234,38 +229,40 @@ export default async function AdminRadioPage() {
 						{t("noSchedules")}
 					</p>
 				) : (
-					<table>
+					<div className="overflow-x-auto">
-						<thead>
+						<table>
-							<tr>
+							<thead>
-								<th>ID</th>
+								<tr>
-								<th>{t("user")}</th>
+									<th>ID</th>
-								<th>{t("day")}</th>
+									<th>{t("user")}</th>
-								<th>{t("start")}</th>
+									<th>{t("day")}</th>
-								<th>{t("end")}</th>
+									<th>{t("start")}</th>
-								<th>{t("show")}</th>
+									<th>{t("end")}</th>
-								<th>{t("active")}</th>
+									<th>{t("show")}</th>
-							</tr>
+									<th>{t("active")}</th>
-						</thead>
-						<tbody>
-							{schedules.map((sc) => (
-								<tr key={String(sc.id)}>
-									<td>{String(sc.id)}</td>
-									<td>{String(sc.userId)}</td>
-									<td>{sc.day}</td>
-									<td>{formatTime(sc.startTime)}</td>
-									<td>{formatTime(sc.endTime)}</td>
-									<td>{sc.showName ?? "\u2014"}</td>
-									<td>
-										<span
-											className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
-										>
-											{sc.isActive ? t("active") : t("inactive")}
-										</span>
-									</td>
 								</tr>
-							))}
+							</thead>
-						</tbody>
+							<tbody>
-					</table>
+								{schedules.map((sc) => (
+									<tr key={String(sc.id)}>
+										<td>{String(sc.id)}</td>
+										<td>{String(sc.userId)}</td>
+										<td>{sc.day}</td>
+										<td>{formatTime(sc.startTime)}</td>
+										<td>{formatTime(sc.endTime)}</td>
+										<td>{sc.showName ?? "\u2014"}</td>
+										<td>
+											<span
+												className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
+											>
+												{sc.isActive ? t("active") : t("inactive")}
+											</span>
+										</td>
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
 				)}
 			</section>
 		</main>

src/components/admin/data-table.tsx

@@ -414,7 +414,7 @@ export function DataTable<T extends { id: number | string }>({
 			</div>
 
 			{/* Table */}
-			<div className="rounded-md border">
+			<div className="rounded-md border overflow-x-auto">
 				<Table>
 					<TableHeader>
 						<TableRow>