Improve how we show the `description` of field values

[tordans]

Description

Take the screenshot from https://github.com/openstreetmap/id-tagging-schema/pull/1402#issuecomment-2525364523

We have this helpful feature to add descriptions to field values, but it is very hard to find ATM.

So this issue is an UX issue first, IMO: How can we make those descriptions more visible, when they are present?

• Most of the time there is none
• When fields are not translated, the UI is different
• When fields are partially translated, the UI is different
• Value translations can have various lengths (I think they are multi line nowadays)
• Value descriptions can have various lengths

Maybe someone can take a look at those cases and come up with a mockup?

Screenshots

Kontext

https://github.com/ideditor/schema-builder/pull/205/files

[Deeptanshu-sankhwar]

Thanks for sharing @tordans ! I am trying to prepare the mockups

[kanavbajaj]

POSSIBLE SOLUTIONS:

1. Display Descriptions with a Tooltip or Inline Format Add a small info icon (ℹ️) next to field values. When hovered or clicked, the description is displayed as a tooltip. Alternatively, show the description inline beneath the value, with a smaller font and subtle styling.
2. Handle Translation Cases If a field is not translated, show the untranslated text with a placeholder indicating the language (e.g., "[English]"). If a field is partially translated, clearly distinguish between translated and untranslated portions.
3. Length Management Truncate long descriptions with an ellipsis (...) and provide a "Read more" option to expand the full text.
4. Responsive Design Ensure the layout adjusts smoothly for various screen sizes, including mobile and tablet views.
5. Indicator for Missing Descriptions If no description is available, display a placeholder (e.g., "No description provided").

[meenakshikr]

hey can you assign this issue to me i would like to work on it

[Deeptanshu-sankhwar]

Go for it @meenakshikr. I got side tracked with other changes.

[meenakshikr]

Hi deeptanshu , i was trying to solve the issue but i noticed that since the side bar/panel background is white, if i try to make tooltip colour uniform it overlaps and difficult to notice it. Do you have any advice?