Fix: Adminbereich responsiv (Mobile-Drawer-Navigation, scrollbare Tabellen)

This commit is contained in:
2026-07-19 11:20:33 +02:00
parent 986de50963
commit d65897b8e1
6 changed files with 147 additions and 90 deletions

View File

@@ -134,7 +134,7 @@ function AddDeviceForm() {
}
return (
<form onSubmit={handleSubmit} className="flex items-end gap-2">
<form onSubmit={handleSubmit} className="flex flex-wrap items-end gap-2">
<div>
<label className="mb-1 block text-xs font-medium text-black/50 dark:text-white/50">
Hostname
@@ -191,23 +191,25 @@ export function DevicesPage() {
<p className="text-sm text-red-500">Geräte konnten nicht geladen werden.</p>
) : devices && devices.length > 0 ? (
<div className="overflow-hidden rounded-2xl border border-black/10 dark:border-white/10">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-black/10 bg-black/[0.02] text-left text-xs
uppercase tracking-wide text-black/40 dark:border-white/10 dark:bg-white/5 dark:text-white/40">
<th className="px-4 py-2 font-medium">Gerät</th>
<th className="px-4 py-2 font-medium">Status</th>
<th className="px-4 py-2 font-medium">Dienste</th>
<th className="px-4 py-2 font-medium">Letzter Scan</th>
<th className="px-4 py-2" />
</tr>
</thead>
<tbody>
{devices.map((device) => (
<DeviceRow key={device.id} device={device} />
))}
</tbody>
</table>
<div className="overflow-x-auto">
<table className="w-full min-w-[640px] text-sm">
<thead>
<tr className="border-b border-black/10 bg-black/[0.02] text-left text-xs
uppercase tracking-wide text-black/40 dark:border-white/10 dark:bg-white/5 dark:text-white/40">
<th className="px-4 py-2 font-medium">Gerät</th>
<th className="px-4 py-2 font-medium">Status</th>
<th className="px-4 py-2 font-medium">Dienste</th>
<th className="px-4 py-2 font-medium">Letzter Scan</th>
<th className="px-4 py-2" />
</tr>
</thead>
<tbody>
{devices.map((device) => (
<DeviceRow key={device.id} device={device} />
))}
</tbody>
</table>
</div>
</div>
) : (
<p className="text-sm text-black/40 dark:text-white/40">