- Handle poll errors including 410 Gone in useManualExtraction hook
- Add specific progress stage messages (Preparing/Processing/Mapping/Complete)
- Enforce 44px minimum touch targets on all interactive elements
- Add tests for inline editing, mobile fullscreen, and desktop modal layouts
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace raw HTML checkboxes with MUI Checkbox wrapped in FormControlLabel
for consistent styling and theme integration across:
- DocumentForm.tsx (shared vehicles + scan maintenance checkboxes)
- VehicleForm.tsx (TCO enabled checkbox)
- SignupForm.tsx (terms acceptance checkbox)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implemented comprehensive document editing capabilities:
1. Created EditDocumentDialog component:
- Responsive MUI Dialog with fullScreen on mobile
- Wraps DocumentForm in edit mode
- Proper close handlers with refetch
2. Enhanced DocumentForm to support edit mode:
- Added mode prop ('create' | 'edit')
- Pre-populate all fields from initialValues
- Use useUpdateDocument hook when in edit mode
- Multi-select for shared vehicles (insurance only)
- Vehicle and document type disabled in edit mode
- Optional file upload in edit mode
- Dynamic button text (Create/Save Changes)
3. Updated DocumentDetailPage:
- Added Edit button with proper touch targets
- Integrated EditDocumentDialog
- Refetch document on successful edit
Mobile-first implementation:
- All touch targets >= 44px
- Dialog goes fullScreen on mobile
- Form fields stack on mobile
- Shared vehicle checkboxes have min-h-[44px]
- Buttons use flex-wrap for mobile overflow
Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
File inputs are replaced elements that ignore CSS centering properties.
The only reliable solution is to wrap the input in a flex container
with items-center.
Changes:
- Added wrapper div with `flex items-center h-11`
- Moved border/background/focus styles to the wrapper
- Input now uses flex-1 to fill available space
- Used focus-within for focus ring on wrapper
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Use leading-[44px] to match the h-11 height, which should vertically
center the file input content. Removed padding that was conflicting.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The "Choose File" button and "No file chosen" text were not vertically
centered within the file input box.
Fixed by:
- Using py-2.5 for input padding (10px top/bottom)
- Adding file:my-auto to center the button vertically
- Adjusting file:py-1.5 for button internal padding
Note: flex/items-center don't work on <input> elements as they are
replaced elements. Using padding and margin-auto instead.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The "Choose File" button and "No file chosen" text were not vertically
centered within the file input. This was caused by:
1. Browser default `align-items: baseline` for file inputs
2. Conflicting `py-2` padding on the input container
Fixed by:
- Removing `py-2` (conflicting vertical padding)
- Adding `flex items-center` (explicit vertical centering)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
