From 39082fe42d28db61319b6049d95bf95da28fe583 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Wed, 22 Jul 2026 09:39:58 +0800
Subject: [PATCH] fix(ui): correct invalid disabled:file variant on the upload
file-input
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
DocumentManagerPanel's used `disabled:file:opacity-50`, which
Tailwind compiles to a `:disabled` pseudo-class bound to the `::file-selector-button`
pseudo-element. Only user-action pseudo-classes may follow a pseudo-element, so that
selector is invalid CSS: Turbopack's dev parser rejects and drops the rule (the disabled
file input was never actually dimmed, and the dev server logged a recurring globals.css
parse error).
Use plain `disabled:opacity-50`, which dims the whole control when disabled — the
conventional, valid pattern. Verified with the project's own @tailwindcss/postcss
transform: the old class emits 1 invalid `::file-selector-button`+`:disabled` selector,
the fix emits 0. Pre-existing on main; the production build (lightningcss) tolerated it,
so this is dev-parity plus a real cosmetic fix (disabled uploads now dim).
Co-Authored-By: Claude Opus 4.8
---
src/components/clinical-dashboard/DocumentManagerPanel.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/clinical-dashboard/DocumentManagerPanel.tsx b/src/components/clinical-dashboard/DocumentManagerPanel.tsx
index 81c3fa3b1..9f8bff1d3 100644
--- a/src/components/clinical-dashboard/DocumentManagerPanel.tsx
+++ b/src/components/clinical-dashboard/DocumentManagerPanel.tsx
@@ -401,7 +401,7 @@ export function UploadPanel({
multiple
disabled={demoMode || !canUpload || uploading}
onChange={() => changeStatus(null)}
- className="mt-2 block w-full text-xs font-medium text-[color:var(--text-muted)] file:mr-3 file:min-h-9 file:cursor-pointer file:rounded-md file:border file:border-[color:var(--border)] file:bg-[color:var(--surface)] file:px-3 file:text-xs file:font-semibold file:text-[color:var(--text)] file:shadow-[var(--shadow-inset)] file:transition file:hover:bg-[color:var(--surface-subtle)] disabled:file:opacity-50"
+ className="mt-2 block w-full text-xs font-medium text-[color:var(--text-muted)] file:mr-3 file:min-h-9 file:cursor-pointer file:rounded-md file:border file:border-[color:var(--border)] file:bg-[color:var(--surface)] file:px-3 file:text-xs file:font-semibold file:text-[color:var(--text)] file:shadow-[var(--shadow-inset)] file:transition file:hover:bg-[color:var(--surface-subtle)] disabled:opacity-50"
/>