kcms/tablet: Improve the UI of mapping the tablet area to the screen

Our current preview of the mapping is a little wonky. We've received a non-zero amount of complaints that it's confusing. For example, it's not clear which part is the screen and how it relates to the tablet area. Now, the entire UI of this feature is overhauled while still keeping similar functionality. The biggest change is that the two areas (input and output) are no longer overlapping each other.

This will look out of place until the UI overhaul is merged. I do not consider that a blocker since my UI overhaul is still on track for 6.3.