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
This commit is contained in:
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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in new issue
Block a user