fix: mobile responsive improvements
- Audit: responsive summary cards (grid-cols-2 mobile, p-3), responsive empty states - Repair-icons/sync-all: log area horizontal scroll (overflow-x-auto, whitespace-nowrap) - Upload furni: tighter mobile padding (p-4 sm:p-5) - Nitro client: compact toolbar on mobile (smaller buttons, tighter gap, top-2/left-2)
This commit is contained in:
1 parent
43dacea672
commit
d189bb5af4
5 files changed
+97
-87
No files matched your search
@@ -223,15 +223,17 @@ export function AuditClient() {
|
||||
{summary && (
|
||||
<>
|
||||
{/* Summary cards */}
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="rounded-xl border bg-card p-4 space-y-1">
|
||||
<div className="text-2xl font-bold">{summary.totalItemsBase}</div>
|
||||
<div className="grid gap-3 grid-cols-2 sm:grid-cols-4">
|
||||
<div className="rounded-xl border bg-card p-3 sm:p-4 space-y-1">
|
||||
<div className="text-xl sm:text-2xl font-bold">
|
||||
{summary.totalItemsBase}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
items_base entries
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-xl border bg-card p-4 space-y-1">
|
||||
<div className="text-2xl font-bold">
|
||||
<div className="rounded-xl border bg-card p-3 sm:p-4 space-y-1">
|
||||
<div className="text-xl sm:text-2xl font-bold">
|
||||
{summary.totalCatalogItems}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
@@ -239,20 +241,20 @@ export function AuditClient() {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`rounded-xl border p-4 space-y-1 ${errors.length > 0 ? "border-[var(--admin-error-border)] bg-[var(--admin-error-subtle)]" : "bg-card"}`}
|
||||
className={`rounded-xl border p-3 sm:p-4 space-y-1 ${errors.length > 0 ? "border-[var(--admin-error-border)] bg-[var(--admin-error-subtle)]" : "bg-card"}`}
|
||||
>
|
||||
<div
|
||||
className={`text-2xl font-bold ${errors.length > 0 ? "text-[var(--admin-error)]" : ""}`}
|
||||
className={`text-xl sm:text-2xl font-bold ${errors.length > 0 ? "text-[var(--admin-error)]" : ""}`}
|
||||
>
|
||||
{errors.length}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">Errors</div>
|
||||
</div>
|
||||
<div
|
||||
className={`rounded-xl border p-4 space-y-1 ${warnings.length > 0 ? "border-[var(--admin-warning-border)] bg-[var(--admin-warning-subtle)]" : "bg-card"}`}
|
||||
className={`rounded-xl border p-3 sm:p-4 space-y-1 ${warnings.length > 0 ? "border-[var(--admin-warning-border)] bg-[var(--admin-warning-subtle)]" : "bg-card"}`}
|
||||
>
|
||||
<div
|
||||
className={`text-2xl font-bold ${warnings.length > 0 ? "text-[var(--admin-warning)]" : ""}`}
|
||||
className={`text-xl sm:text-2xl font-bold ${warnings.length > 0 ? "text-[var(--admin-warning)]" : ""}`}
|
||||
>
|
||||
{warnings.length}
|
||||
</div>
|
||||
@@ -383,7 +385,7 @@ export function AuditClient() {
|
||||
{TYPE_LABELS[issue.type] || issue.type}
|
||||
</span>
|
||||
{issue.classname && (
|
||||
<code className="text-xs bg-background/50 px-1.5 py-0.5 rounded font-mono">
|
||||
<code className="text-xs bg-background/50 px-1.5 py-0.5 rounded font-mono break-all max-w-[200px]">
|
||||
{issue.classname}
|
||||
</code>
|
||||
)}
|
||||
@@ -425,9 +427,11 @@ export function AuditClient() {
|
||||
{activeTab === "issues" &&
|
||||
issues.length === 0 &&
|
||||
missingFromSources.length === 0 && (
|
||||
<div className="rounded-xl border bg-card p-12 text-center text-muted-foreground">
|
||||
<CheckCircle2 className="w-12 h-12 mx-auto mb-3 text-[var(--admin-success)]" />
|
||||
<p className="text-lg font-medium">No issues found</p>
|
||||
<div className="rounded-xl border bg-card p-6 sm:p-12 text-center text-muted-foreground">
|
||||
<CheckCircle2 className="w-10 h-10 sm:w-12 sm:h-12 mx-auto mb-3 text-[var(--admin-success)]" />
|
||||
<p className="text-base sm:text-lg font-medium">
|
||||
No issues found
|
||||
</p>
|
||||
<p className="text-sm">Your catalog is clean!</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -448,8 +452,8 @@ export function AuditClient() {
|
||||
)}
|
||||
|
||||
{!loading && !summary && (
|
||||
<div className="rounded-xl border bg-card p-12 text-center text-muted-foreground">
|
||||
<SearchX className="w-12 h-12 mx-auto mb-3 opacity-40" />
|
||||
<div className="rounded-xl border bg-card p-6 sm:p-12 text-center text-muted-foreground">
|
||||
<SearchX className="w-10 h-10 sm:w-12 sm:h-12 mx-auto mb-3 opacity-40" />
|
||||
<p>
|
||||
Run a full audit to check for missing catalog entries, broken
|
||||
references, missing files, and items available from clone sources.
|
||||
|
||||
@@ -108,7 +108,7 @@ export function UploadFurniClient() {
|
||||
<div className="space-y-6">
|
||||
{!result ? (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="rounded-xl border bg-card p-5 space-y-5">
|
||||
<div className="rounded-xl border bg-card p-4 sm:p-5 space-y-5">
|
||||
<div className="text-sm font-medium">Furniture Details</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
|
||||
@@ -160,9 +160,12 @@ export function RepairIconsClient() {
|
||||
)}
|
||||
|
||||
{log.length > 0 && (
|
||||
<div className="rounded-xl border bg-card p-4 max-h-80 overflow-y-auto space-y-0.5">
|
||||
<div className="rounded-xl border bg-card p-4 max-h-80 overflow-x-auto overflow-y-auto space-y-0.5">
|
||||
{log.map((line) => (
|
||||
<div key={line} className="text-xs font-mono text-muted-foreground">
|
||||
<div
|
||||
key={line}
|
||||
className="text-xs font-mono text-muted-foreground whitespace-nowrap"
|
||||
>
|
||||
{line}
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -147,9 +147,12 @@ export function SyncAllClient() {
|
||||
)}
|
||||
|
||||
{log.length > 0 && (
|
||||
<div className="rounded-xl border bg-card p-4 max-h-80 overflow-y-auto space-y-0.5">
|
||||
<div className="rounded-xl border bg-card p-4 max-h-80 overflow-x-auto overflow-y-auto space-y-0.5">
|
||||
{log.map((line) => (
|
||||
<div key={line} className="text-xs font-mono text-muted-foreground">
|
||||
<div
|
||||
key={line}
|
||||
className="text-xs font-mono text-muted-foreground whitespace-nowrap"
|
||||
>
|
||||
{line}
|
||||
</div>
|
||||
))}
|
||||
|
||||
Reference in new issue
Block a user