UI Improvement: Add Proper Padding and Margin to Asset Management Modal Form #694
Description
Is your feature request related to a problem? Please describe.
Currently, the Register Capital Asset form modal on the Asset Management page lacks proper spacing and layout structure.
The following issues are observed:
- Input fields are placed too close to each other.
- There is insufficient padding inside the modal container.
- The form looks cramped and difficult to scan.
- Labels, inputs, and buttons are not well aligned.
- The layout does not match the visual quality of other dashboard components.
These issues negatively affect usability and overall design consistency.
Describe the solution you'd like
I would like to request UI improvements for the Asset Registration modal, including:
✅ 1. Improve Internal Spacing
- Add consistent padding inside the modal.
- Increase vertical spacing between form fields.
- Add margins between form rows.
✅ 2. Improve Form Layout
- Use proper grid/flex layout for two-column forms.
- Align input fields and dropdowns uniformly.
- Ensure consistent input height.
✅ 3. Improve Button Placement
- Add spacing above the "Register & Track" button.
- Center-align or right-align the button.
- Improve button padding for better clickability.
✅ 4. Improve Responsiveness
- Stack fields vertically on smaller screens.
- Maintain spacing on mobile devices.
✅ 5. Visual Consistency
- Match padding, border-radius, and shadows with existing modals.
- Apply shared CSS utilities if available.
Describe alternatives you've considered
- Adding inline margin styles to individual inputs.
- Making minor spacing adjustments only.
However, these approaches do not solve the overall layout quality issues.
Additional context
Benefits of these improvements:
- ✅ Improves form readability
- ✅ Enhances user experience
- ✅ Makes UI more professional
- ✅ Reduces input errors
- ✅ Improves accessibility
Suggested Implementation (Optional):
- Add
.modal-contentpadding classes. - Use CSS Grid for form layout.
- Apply consistent spacing variables.
- Use reusable form components.
Reference:
Current modal UI screenshot is attached in this issue.
Assign this issue to me under ECWOC'26