Inspect's popup truncates the property values

[zstadler]

Maputnik version: v2.0.0-pre.2 Browser: All OS: All

Description of the bug: The Inspect's popup does not show much of the properties values. Instead, there is a large gap between the property name and the value.

Steps to reproduce the behavior:

1. Open any style with a vector source, such as the pre-loaded "OSM Liberty" style
2. Change to Inspect view
3. Move the mouse around the map

Screenshots:

[HarelM]

This is probably related to some css issues. Can you provide a screen shot of the same place in 1.7 (previous maputnik website)? I also think the is a problem with the modal dialog widths.

[zstadler]

The 1.7.0 version looks better, but still needs a CSS improvement to reduce the empty gap and increase the width of the values column:

I also believe that in 2.0.0 it is not just a CSS issue. The 1.7.0 row structure is straight forward:

The 2.0.0 row structure has

• An instance of maputnik-input-block within another maputnik-input-block (marked purple)
• <div class="maputnik-input-block-action"></div> elements that did not exist in 1.7.0
• A total of 3 elements that take space and have no value (marked yellow)

For our reference, here are the footprints of the yellow elements:

[HarelM]

I've seen this block stuff in the code, it's very confusing to understand and see where a block wraps another block... You should be able to workaroud this locally by changing some css class in the browser itself. Never the less, this needs fixing...

[zstadler]

It is not clear to me why <input ...> is used for the values column, as values it contains cannot be changed.

This may or may not be causing some small vertical offset between the two columns:

I believe this pop-up would be better off as simple table with same formatting for both columns, where the tags use just 30% of the width.