The current CdxPopover implementation in the editTimeSnakValue overflows triggering a scrollbar when the precision value is changed. This is undesired behaviour - we want the popup to grow rather than show a scrollbar or wrap content.
Steps to reproduce
- Open the edit statement dialog for a time-datatype value
- Click into the text input field to focus the field and display the popup (On Chrome, this already shows a scrollbar at least on my machine)
- Change the precision to '100,000 years'
The content is clipped and scrollbar appears as below:
Note that closing the pop-up and re-opening it causes the pop-up to display correctly, and selected a different precision value resets the size of the popup to be too narrow.
Other observations
- The CdxPopover component uses floating-ui to control the 'max-width' property of the popup div. This calculates the max-width as a function of the availableWidth (see Popover.vue), and the availableWidth is derived from the clipping rectangle of the parent components.
- For some reason, when the pop-up initially triggers on Chrome, this availableWidth is the 331px defined by the width of the wikibase-wbui2025-edit-statement-value-form-modal div. In Firefox, the availableWidth is the whole width of the screen
- When the Precision value is changed, in both Chrome and Firefox the availableWidth is the 331px
- If the popup is closed and opened again, in both Chrome and Firefox, the popup shows "correctly" (with the available width the full width of the screen).
- If a Precision value is selected for which there is already a cached parsed value (i.e. a value that has been selected before), the popup remains the "correct" width
- If a Precision value is selected for which there is no cached parsed value, the popup shrinks again to the 331px.
Acceptance Criteria
- Changing the "Precision" value in the popup of the editableTimeSnakValue component causes the popup to cleanly resize to accommodate the width of the updated content, without scrollbars.


