fix: mobile responsiveness for all admin pages
Deploy / release (push) Skipped
Deploy / deploy (push) Successful in 1m25s

- 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
This commit is contained in:
openhands committed 2026-07-21 16:52:58 +02:00
1 parent d189bb5af4
commit 827595ef00
5 files changed
+65 -39

No files matched your search

@@ -69,7 +69,7 @@ export function CatalogDetailTabs({
}: CatalogDetailTabsProps) { }: CatalogDetailTabsProps) {
return ( return (
<Tabs defaultValue="settings"> <Tabs defaultValue="settings">
<TabsList> <TabsList className="overflow-x-auto flex-nowrap w-full">
<TabsTrigger value="settings" className="gap-2"> <TabsTrigger value="settings" className="gap-2">
<Settings className="h-4 w-4" /> <Settings className="h-4 w-4" />
Settings Settings
File diff suppressed because it is too large. Load diff
@@ -876,7 +876,7 @@ function FurniGrid({ source }: FurniGridProps) {
{/* Pagination */} {/* Pagination */}
{total > PER_PAGE && ( {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"> <span className="text-sm text-muted-foreground">
Page {page} / {lastPage} Page {page} / {lastPage}
</span> </span>
+8 -11
View File
@@ -34,7 +34,6 @@ type Schedule = {
isActive: boolean; isActive: boolean;
}; };
function formatTime(d: Date | null): string { function formatTime(d: Date | null): string {
return d ? d.toISOString().slice(11, 16) : "\u2014"; return d ? d.toISOString().slice(11, 16) : "\u2014";
} }
@@ -108,22 +107,14 @@ export default async function AdminRadioPage() {
return ( return (
<main> <main>
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6"> <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 <StatusCard
label={t("pendingApplications")} label={t("pendingApplications")}
value={pendingApps} value={pendingApps}
state={pendingApps > 0 ? "warn" : "ok"} state={pendingApps > 0 ? "warn" : "ok"}
icon="📝" icon="📝"
/> />
<StatusCard <StatusCard label={t("schedules")} value={schedules.length} icon="🗓️" />
label={t("schedules")}
value={schedules.length}
icon="🗓️"
/>
<StatusCard <StatusCard
label={t("activeSchedules")} label={t("activeSchedules")}
value={activeSchedules} value={activeSchedules}
@@ -141,6 +132,7 @@ export default async function AdminRadioPage() {
{t("noShouts")} {t("noShouts")}
</p> </p>
) : ( ) : (
<div className="overflow-x-auto">
<table> <table>
<thead> <thead>
<tr> <tr>
@@ -174,6 +166,7 @@ export default async function AdminRadioPage() {
))} ))}
</tbody> </tbody>
</table> </table>
</div>
)} )}
</section> </section>
@@ -186,6 +179,7 @@ export default async function AdminRadioPage() {
{t("noApplications")} {t("noApplications")}
</p> </p>
) : ( ) : (
<div className="overflow-x-auto">
<table> <table>
<thead> <thead>
<tr> <tr>
@@ -222,6 +216,7 @@ export default async function AdminRadioPage() {
))} ))}
</tbody> </tbody>
</table> </table>
</div>
)} )}
</section> </section>
@@ -234,6 +229,7 @@ export default async function AdminRadioPage() {
{t("noSchedules")} {t("noSchedules")}
</p> </p>
) : ( ) : (
<div className="overflow-x-auto">
<table> <table>
<thead> <thead>
<tr> <tr>
@@ -266,6 +262,7 @@ export default async function AdminRadioPage() {
))} ))}
</tbody> </tbody>
</table> </table>
</div>
)} )}
</section> </section>
</main> </main>
+1 -1
View File
@@ -414,7 +414,7 @@ export function DataTable<T extends { id: number | string }>({
</div> </div>
{/* Table */} {/* Table */}
<div className="rounded-md border"> <div className="rounded-md border overflow-x-auto">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>