UI issue in mobile inspect and Desktop view -> Configurable product variants add section.

[ashishkumar-webkul]

Terms

• Before you openning this issue, i have checked if the issue has already been reported.

Bagisto Version(s) affected

MASTER

Issue Description

When we create a Configurable product and add variant details, there we can see the UI issue in the Add image section. weather we add a single image or multiple image we can see that the UI issue is still appearing. Checked the issue in the mobile view and desktop view.

Preconditions

1. Admin end should work properly.
2. Able to create a Configurable product.

Steps to reproduce

1. Go to Admin -> Catalog -> Product -> Create a configurable product.
2. Now in the variants section add the details and images.
3. Check the UI of the variants image section in Mobile View and Desktop View.
4. There we will be able to see the UI issue.

Expected Result

The Variants images should be clear and there should be no overlapping in the Delete button in mobile view.
All the images delete button should be in proper place.
In Desktop View and Mobile Inspection view the details should appear clear.

Actual Result

Please check the screenshots for a better understanding of the issues. Please check for the reference.

Screenshots

Desktop View

Mobile View

Additional context

No response

[prabhat-webkul]

added changes for images responsive here.

other input fields are adjusted above as per content, it is set in all data grid to middle the vertical alignment, you must face the same in each grid. no need to apply any fixation for this.

[Sanjaybhattwebkul]

@prabhatkumaroc082
All the input fields should be in alignment, please take a reference from Here