When hovering over an object with a field icon, the field icon goes over the border

[danieldegroot2]

Displays scroll bars, indicating icon is too large / box is too small to be displayed by default.
Example: tree node with leaf type set.

It does not seem resolution or zoom dependent.

See also #9070

How to reproduce the issue?

1. Open the editor with the "Edit" button (or manually with the down arrow menu to the right of it).
   
2. Create (or select) an object with a 'sub-type' field which usually has an icon, i.e. a tree with "leaf type" can be "broadleaved".

Let's add a node

...make this node a regular tree by selecting from the presets

...and then select a sub-type. Here it is for example "leaf type". Let's select "Broadleaved tree".

I have now specified a sub-type for the object. It looks like this when it is selected.

6. Deselect the object by clicking anywhere on the map. The UI will change to a search bar as usual.
   

7. Hover over the object, i.e. a tree node. The UI will change to a preview of the object, as usual.

The "Broadleaved tree" icon is used for the preset "Broadleaved tree (deciduous)" itself at the top, in this case.
It is also present in the "leaf type" field to give users a visual indication of the subtype regardless.
If you look at the field "leaf type" it will have the "broadleaved tree" icon, but there it is obscured by two sliders, indicating the icon or the box it is in may not fit inside the UI properly when you hover over it. (incorrect behaviour)

9. Select the object

If we actually select it again, it looks fine. There are no sliders or similar obscuring the icon and the icon itself is fully visible and fits inside the box in the UI. (expected behaviour)

Screenshot(s) or anything else?

(Rapid does not have hover UI.)

Which deployed environments do you see the issue in?

Released version at openstreetmap.org/edit, Development version at ideditor.netlify.app

What version numbers does this issue effect?

2.27.1, 2.28.0-dev

Which browsers are you seeing this problem on?

Chrome, Microsoft Edge

[RohitChauhan98]

Please write detailed instructions to regenerate the issue... it's not sufficient for new contributors...

[danieldegroot2]

I have added some instructions, I hope they help. If you have any questions, feel free to post them here.

This is likely a really low-priority issue, as noone ever really looks at the previews. ;-)
Have you looked at good first issues? I assume you are already familiar with this concept where such issues are specifically labeled for new beginners to look at.
It may take some time to get going btw, since OpenStreetMap and related projects rely mostly on volunteers.

[RohitChauhan98]

I am new to D3.js... I tried to find the issue in the project but was not able find... can you help me out how the project code is structured... sorry to ask but i have spent good amount of time understanding it...

[nickrsan]

Gonna take a bit of an uneducated guess, since I don't know the codebase, but do know CSS, and say that I suspect it may be located here in the code:

iD/css/80_app.css

Lines 4133 to 4142 in 68ff64b

	.inspector-hover .form-field-input-multicombo .chip {
	background: #eee;
	border: 1px solid #ccc;
	}
	/* scrollbars only when necessary*/
	.inspector-hover div {
	overflow-x: visible;
	overflow-y: auto;
	}

The combination of those two selectors seems like it would add 1px to each side of the box and trigger scrollbars on overflow. I don't know that class is active on that element, but seems plausible that it could be the culprit. But I don't know right now where else it's used to suggest what an actual fix looks like and I haven't verified that it's the cause of the issue - if I can come back to this issue I'll see if I can reproduce and inspect the classes.

[draunger]

hey @1ec5 @RohitChauhan98 @danieldegroot2 is this issued solved ? if yes then close this issue because it makes problem for a beginner like me