From e9d4ba384f0678e8be197c2c5ae7d5da9fb32856 Mon Sep 17 00:00:00 2001 From: Kyle Pope Date: Tue, 3 Mar 2026 03:40:40 +0800 Subject: [PATCH] Fix duplicate calendar icon in Firefox DatePicker Chromium's icon is hidden via ::-webkit-calendar-picker-indicator. Firefox doesn't support that pseudo-element, so the custom Calendar button now has bg-background + z-[1] to opaquely cover Firefox's native icon. Removed invalid -moz pseudo-element rules. Co-Authored-By: Claude Opus 4.6 --- frontend/src/components/ui/date-picker.tsx | 2 +- frontend/src/index.css | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/ui/date-picker.tsx b/frontend/src/components/ui/date-picker.tsx index 33dce13..871449b 100644 --- a/frontend/src/components/ui/date-picker.tsx +++ b/frontend/src/components/ui/date-picker.tsx @@ -464,7 +464,7 @@ const DatePicker = React.forwardRef( disabled={disabled} onMouseDown={(e) => e.preventDefault()} onClick={togglePopup} - className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded p-0.5 hover:bg-accent/10 transition-colors disabled:opacity-50" + className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded p-0.5 bg-background hover:bg-accent/10 transition-colors disabled:opacity-50 z-[1]" tabIndex={-1} aria-label="Open calendar" > diff --git a/frontend/src/index.css b/frontend/src/index.css index e819ade..37c9e98 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -201,9 +201,11 @@ input[type="datetime-local"]::-webkit-calendar-picker-indicator { } /* Hide native picker icon inside DatePicker wrapper (custom icon replaces it) */ +/* Chromium: remove the native calendar icon entirely */ .datepicker-wrapper input::-webkit-calendar-picker-indicator { display: none; } +/* Firefox: opaque background on the custom icon covers the native one (see date-picker.tsx) */ /* ── Form validation — red outline only after submit attempt ── */ form[data-submitted] input:invalid,