feat(ui): improve mobile browser support

This commit is contained in:
2026-07-22 20:16:16 +00:00
parent b95811a4e5
commit eceb926d91
12 changed files with 46 additions and 46 deletions
+8 -8
View File
@@ -20,12 +20,12 @@ export function AdminPage() {
return (
<div>
<PageHeader title="Admin" subtitle="Platform administration." />
<div className="mb-6 flex gap-1 border-b border-border">
<div className="mb-6 flex gap-1 overflow-x-auto border-b border-border">
{tabs.map((t) => (
<button
key={t.id}
onClick={() => setTab(t.id)}
className={`px-4 py-2 text-sm font-medium transition ${
className={`shrink-0 px-4 py-2 text-sm font-medium transition ${
tab === t.id ? "border-b-2 border-accent text-text" : "text-muted hover:text-text"
}`}
>
@@ -110,7 +110,7 @@ function UsersTab() {
</p>
</div>
{u.id !== me?.id && (
<div className="flex gap-2">
<div className="flex w-full flex-wrap gap-2 sm:w-auto sm:flex-nowrap">
<Button variant="ghost" onClick={() => setRole(u, u.role === "ADMIN" ? "USER" : "ADMIN")}>
{u.role === "ADMIN" ? "Demote" : "Promote"}
</Button>
@@ -178,7 +178,7 @@ function AgentsTab() {
</div>
{a.description && <p className="text-xs text-muted">{a.description}</p>}
</div>
<div className="flex gap-2">
<div className="flex w-full flex-wrap gap-2 sm:w-auto sm:flex-nowrap">
<Button variant="ghost" onClick={() => toggle(a)}>
{a.disabled ? "Enable" : "Disable"}
</Button>
@@ -211,14 +211,14 @@ function SettingsTab() {
if (!settings) return <Loader />;
return (
<div className="space-y-3">
<Card className="flex items-center justify-between p-5">
<Card className="flex flex-wrap items-center justify-between gap-4 p-4 sm:p-5">
<div>
<p className="font-medium text-text">Enable registration</p>
<p className="text-sm text-muted">Allow new humans to create accounts.</p>
</div>
<Toggle checked={settings.registration_enabled} onChange={(v) => update({ registration_enabled: v })} />
</Card>
<Card className="flex items-center justify-between p-5">
<Card className="flex flex-wrap items-center justify-between gap-4 p-4 sm:p-5">
<div>
<p className="font-medium text-text">Enable requests</p>
<p className="text-sm text-muted">Allow agents to submit new change requests platform-wide.</p>
@@ -251,14 +251,14 @@ function AuditTab() {
<div>
<div className="space-y-1.5">
{logs.map((l) => (
<Card key={l.id} className="flex items-center gap-3 p-3 text-sm">
<Card key={l.id} className="flex flex-wrap items-center gap-2 p-3 text-sm sm:flex-nowrap sm:gap-3">
<code className="rounded bg-surface-raised px-2 py-0.5 text-xs text-accent">{l.action}</code>
<span className="min-w-0 flex-1 truncate text-muted">
{l.actor ? `@${l.actor.username}` : "system"}
{l.target_type && `${l.target_type}:${l.target_id}`}
{l.detail && ` · ${l.detail}`}
</span>
<span className="shrink-0 text-xs text-faint">{relativeTime(l.created_at)}</span>
<span className="w-full text-xs text-faint sm:w-auto sm:shrink-0">{relativeTime(l.created_at)}</span>
</Card>
))}
</div>