Non-responsive custom mappings

The implementation of the custom mapping page is not following adaptive (AWD) and responsive web design (RWD), which is a usability issue.
The problem is shown in the attachment #1496.
If the screen width is reduced, this is only possible to a fixed min width, which has not wisely defined.
The problem is that the source field name and the target field name is too much appart for the users eye to follow the line.
It happened to me several times that I was loosing the line and set an incorrect value to the target field.

The problem is that the min width of the windows is too large.
One can also see the fact in the screen shot which uses the min screen width, but this width is too large.
There is a large space between the source and target fields.
Also there is another small AWD problem, namely the button are cut off (red part).

The current design lead to making mistakes, that for other reason (see sibling tickets) lead to the effect that a feedback on the mistake done by the user are discovered very late,
and from there can no longer be repaired, e.g. it is not longer allowed to go back or to save the partial work result. Thus, the user needs to restart the whole import procedure from the beginning.

The expected solution:
Option 1) AWD solution: Is to allow a smaller screen width, so that the users can move the source and target field closed together
and allow for aneasy mapping between them.
Option 2) RWD solution: Remove fixed size and left-right alignment. Use a HTML table with the adaptive cell / column width for the source and target cells
so that there is not space between the two cells, since both are left aligned the target fields names on the right are easier to read for the eyes
because the first letters of the field names are below each other.

In the attached picture you can see the importing work items from CSV files functionality in EWM CCM. There you can do attribute mappings. This Change Request is regarding this functionality.