fix: Add document modal file input bottom padding (#19) #20

Merged

egullickson merged 4 commits from issue-19-document-modal-padding into main 2026-01-05 00:52:47 +00:00

Conversation 0 Commits 4 Files Changed 2

+63 -7

egullickson commented 2026-01-04 21:14:42 +00:00

Owner

Copy Link

Copy Source

Summary

• Adds mb-2 bottom margin to the file input container in DocumentForm
• Creates consistent vertical spacing between the file input and action buttons

Fixes #19

Test Plan

• Open Add Document modal on desktop
• Verify spacing between file input and buttons is now consistent
• Open Add Document modal on mobile (full-screen)
• Verify spacing is consistent on mobile
• Lint passes
• Type-check passes

🤖 Generated with Claude Code

## Summary - Adds `mb-2` bottom margin to the file input container in DocumentForm - Creates consistent vertical spacing between the file input and action buttons Fixes #19 ## Test Plan - [x] Open Add Document modal on desktop - [x] Verify spacing between file input and buttons is now consistent - [x] Open Add Document modal on mobile (full-screen) - [x] Verify spacing is consistent on mobile - [x] Lint passes - [x] Type-check passes 🤖 Generated with [Claude Code](https://claude.com/claude-code)

egullickson added 1 commit 2026-01-04 21:14:43 +00:00

fix: Add bottom padding to document modal file input (refs #19) ... ac8e411bae

Added mb-2 to the file input container to create consistent spacing
between the Upload image/PDF input and the action buttons below.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

egullickson referenced this pull request 2026-01-04 21:14:57 +00:00

Fix: Add Document modal file input missing bottom padding #19

egullickson force-pushed issue-19-document-modal-padding from ac8e411bae to 087cf3b06c 2026-01-04 22:58:00 +00:00 Compare

egullickson force-pushed issue-19-document-modal-padding from 087cf3b06c to 510420e4fd 2026-01-05 00:21:23 +00:00 Compare

egullickson added 1 commit 2026-01-05 00:28:20 +00:00

fix: Vertically center file input content (refs #19) ... 1534f33232

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 <[email protected]>

egullickson added 1 commit 2026-01-05 00:36:55 +00:00

fix: Use line-height for file input vertical centering (refs #19) ... 75d1a421d4

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 <[email protected]>

egullickson added 1 commit 2026-01-05 00:45:29 +00:00

fix: Wrap file input in flex container for vertical centering (refs #19) ... 0e9d94dafa

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 <[email protected]>

egullickson merged commit 1370e22bd7 into main 2026-01-05 00:52:47 +00:00

egullickson deleted branch issue-19-document-modal-padding 2026-01-05 00:52:47 +00:00

egullickson referenced this issue from a commit 2026-01-05 00:52:48 +00:00

Merge pull request 'fix: Add document modal file input bottom padding (#19)' (#20) from issue-19-document-modal-padding into main

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

status

backlog

status/blocked

status

done

status

in-progress

status

ready

status

review

type

bug

type

chore

type

docs

type

feature

No labels

Milestone

No items

No Milestone

Projects

Clear projects

No projects

Assignees

Clear assignees

egullickson

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#20