Refactor and improve manual input form UI and input components

[Irozuku]

Summary

Refactored and enhanced the manual input form for predictions to improve code organization, visual consistency, and overall user experience. The changes modularize input rendering, unify styling across form elements, and refine the table layout for better readability and usability.

---

Type of Change

Check all that apply like this [x]:

• Backend change
• Frontend change
• CI / Workflow change
• Build / Packaging change
• Bug fix
• Documentation

---

Changes (by file)

Briefly list the important modified files and what was done.

• InputField.jsx (renamed from renderInputField.js): Converted the input field renderer into a reusable React component to improve modularity and maintainability.
• ManualInputForm.jsx: Updated the table layout and styles (headers, rows, hover effects, padding, alignment) for better visual clarity and user experience.
• renderInputField usages: Updated all imports and usages to use the new InputField component.
• Shared styles: Introduced and applied a commonStyles object to unify styling across TextField, Select, and file/image input fields.
• Action buttons: Improved styling and feedback (outlined “Add Row” button, hover effects for delete actions).

Before

After

---

Testing (optional)

• Verify that manual input fields render correctly for all supported data types.
• Confirm that adding and deleting rows works as expected.
• Check visual consistency of inputs and table layout across different themes and screen sizes.