From db2ec156e4ceb1519e66b617f51c347dc82d2f4a Mon Sep 17 00:00:00 2001 From: Kyle Pope Date: Tue, 3 Mar 2026 03:53:36 +0800 Subject: [PATCH] Fix Firefox double calendar icon with opaque cover button @-moz-document url-prefix() was dead since Firefox 61 and -moz-appearance: textfield has no effect on date inputs. Firefox has no CSS pseudo-element for the date picker icon. Fix: custom Calendar button resized to a full-height w-9 panel with bg-background + rounded-r-md that completely occludes Firefox's native icon underneath. Chromium still uses ::-webkit-calendar-picker-indicator to remove its native icon. Co-Authored-By: Claude Opus 4.6 --- frontend/src/components/ui/date-picker.tsx | 2 +- frontend/src/index.css | 11 +++-------- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/ui/date-picker.tsx b/frontend/src/components/ui/date-picker.tsx index 33dce13..cf20a6b 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-px top-px bottom-px w-9 flex items-center justify-center rounded-r-md bg-background hover:bg-accent/10 transition-colors disabled:opacity-50" tabIndex={-1} aria-label="Open calendar" > diff --git a/frontend/src/index.css b/frontend/src/index.css index 622024b..8718d43 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -205,14 +205,9 @@ input[type="datetime-local"]::-webkit-calendar-picker-indicator { .datepicker-wrapper input::-webkit-calendar-picker-indicator { display: none; } -/* Firefox: -moz-appearance: textfield strips all native chrome including the calendar icon. - This is safe because the DatePicker component provides its own custom popup. */ -@-moz-document url-prefix() { - .datepicker-wrapper input[type="date"], - .datepicker-wrapper input[type="datetime-local"] { - -moz-appearance: textfield; - } -} +/* Firefox: No CSS pseudo-element exists to hide the native calendar icon. + The custom button covers the native icon zone with a solid background so + only one icon is visible regardless of browser. */ /* ── Form validation — red outline only after submit attempt ── */ form[data-submitted] input:invalid,