- S-01/W-06/S-02/S-04: Extract MobileDetailOverlay shared component
with Escape key, body scroll lock, and ARIA dialog attributes.
Refactored Todos, Reminders, People, Locations, ProjectDetail.
- W-02: Add specificity contract comment to mobile-scale CSS
- W-03: Enforce 10px floor for text-[9px] on mobile
- W-05: Add sort dropdown to EntityTable mobile card view
- S-03: Export MOBILE/DESKTOP breakpoint constants from useMediaQuery,
updated all 8 consumer files to use constants
- S-06: Bump KanbanBoard TouchSensor tolerance from 5 to 8
- S-07: Hover state audit — no action needed, hoverOnlyWhenSupported
in Tailwind config already handles touch devices correctly
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
3a. CalendarSidebar mobile collapse:
- Desktop sidebar + resize handle hidden below lg breakpoint
- Mobile Sheet overlay with PanelLeft toggle in toolbar
- Template selection closes mobile sidebar automatically
3b. KanbanBoard touch support:
- TouchSensor added alongside PointerSensor (200ms delay)
- Column min-width reduced on mobile (160px vs 200px)
- iOS smooth scroll enabled on horizontal container
3c. EntityTable mobile card view:
- mobileCardRender optional prop renders cards instead of table on mobile
- PeoplePage: card with name, category, email, phone
- LocationsPage: card with name, category, address
- TodosPage/RemindersPage use custom list components, not EntityTable
3d. DatePicker mobile bottom sheet:
- Renders as full-width bottom sheet on mobile (< 768px)
- Safe area inset padding for iOS home indicator
- Desktop positioned dropdown unchanged
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Latent bug: useEffect runs after paint, so the popup rendered at
{top:0, left:0} before repositioning. Switched to useLayoutEffect
which runs synchronously before paint, ensuring correct position
on first frame. Both Chromium and Firefox unaffected by the change.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
When Firefox input variant falls through to button variant, the
positioning logic, close handler, and click-outside handler still
checked variant==='input' and used wrapperRef (which is unattached).
Introduced usesNativeInput flag (input variant + not Firefox) so all
three handlers correctly use triggerRef for Firefox fallback.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Instead of type=text with raw ISO strings, Firefox users now get
the same button-style picker used on the registration screen.
Chromium keeps native date/datetime-local for segmented editing.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Firefox has no CSS pseudo-element to hide its native date picker
calendar icon (Mozilla bug 1830890, open P3). Firefox's date input
doesn't provide Chrome's segmented editing anyway — it renders as
a plain text field with an appended icon.
Fix: detect Firefox via user agent at module load, render type=text
with ISO format placeholder. Chromium keeps native date/datetime-local
for segmented editing UX. min/max omitted for Firefox (only valid on
native date inputs). Custom popup handles all date selection in both.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@-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 <noreply@anthropic.com>
The opaque background overlay approach didn't fully cover Firefox's
native icon. Instead, use @-moz-document url-prefix() to apply
-moz-appearance: textfield which strips all native date input chrome
(including the calendar icon) in Firefox. Safe because the DatePicker
provides its own custom popup. Removed the bg-background z-[1]
workaround from the custom button.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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 <noreply@anthropic.com>
Replaces <input type="text"> with custom display format conversion
with native <input type="date"> / <input type="datetime-local"> for
exact visual parity with Chrome's built-in segmented editing UI.
Removes ~50 lines of isoToDisplay/displayToIso conversion code.
Hides native picker icon inside .datepicker-wrapper via CSS so only
the custom Calendar icon (opening the popup) is visible.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Pad 12-hour display to 2 digits to match Chrome native input format:
03/03/2026 03:12 AM (was 3:12 AM). Relax day/month parser to accept
1-2 digit input while still outputting zero-padded ISO strings.
Update placeholder to DD/MM/YYYY hh:mm AM.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Input variant now shows user-friendly format (DD/MM/YYYY for date,
DD/MM/YYYY h:mm AM/PM for datetime) instead of raw ISO strings.
Internal display state syncs bidirectionally with ISO value prop
using a ref flag to avoid overwriting during active typing.
Popup time selectors changed from 24-hour to 12-hour with AM/PM
dropdown. Button variant datetime display also updated to AM/PM.
Backend contract unchanged — onChange still emits ISO strings.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
DatePicker now supports variant="button" (default, registration DOB)
and variant="input" (typeable text input + calendar icon trigger).
Input variant lets users type dates manually while the calendar icon
opens the same popup picker. Smart blur management prevents onBlur
from firing when focus moves between input, icon, and popup.
9 non-registration usages updated to variant="input".
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Custom date-picker.tsx with date/datetime modes, portal popup with
month/year dropdowns, min/max constraints, and hidden input for form
validation. Replaces all 10 native <input type="date"> and
<input type="datetime-local"> across LockScreen, SettingsPage,
PersonForm, TodoForm, TodoDetailPanel, TaskForm, TaskDetailPanel,
ProjectForm, ReminderForm, and ReminderDetailPanel. Adds Chromium
calendar icon invert CSS fallback.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
