Page MenuHomePhabricator

[MEX] M4.1.3 Fix width of popover in time datatype edit dialog
Closed, ResolvedPublic

Description

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

  1. Open the edit statement dialog for a time-datatype value
  2. 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)
  3. Change the precision to '100,000 years'

The content is clipped and scrollbar appears as below:

2026-01-19-104756_326x260_scrot.png (260×326 px, 13 KB)

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.

Event Timeline

ArthurTaylor renamed this task from [MEX] M4.1.3 Expose @floating-ui/vue `update` function via event listener in CdxPopup to 🚧 [MEX] M4.1.3 Expose @floating-ui/vue `update` function via event listener in CdxPopup.Tue, Jan 20, 11:13 AM
ArthurTaylor renamed this task from 🚧 [MEX] M4.1.3 Expose @floating-ui/vue `update` function via event listener in CdxPopup to 🚧 [MEX] M4.1.3 Fix width of popover in time datatype edit dialog.Wed, Jan 21, 11:56 AM
ArthurTaylor updated the task description. (Show Details)

Change #1230318 had a related patch set uploaded (by Arthur taylor; author: Arthur taylor):

[mediawiki/extensions/Wikibase@master] Fix styling issues with CdxPopover in editableTimeSnakValue

https://gerrit.wikimedia.org/r/1230318

@Alice.moutinho I've fixed some of the layout issues here. But it's still the case that at a screen width of 375px, the longer precision texts are going to wrap / overflow:

2026-01-22-135007_409x444_scrot.png (444×409 px, 28 KB)

Do you have thoughts about what we should do in that case?

@ArthurTaylor I will return the task to the "Ready for development" since it has a pending issue that needs clarification.

Change #1230318 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Fix styling issues with CdxPopover in editableTimeSnakValue

https://gerrit.wikimedia.org/r/1230318

Hi @ArthurTaylor, this is totally my bad as i failed to describe it in the ticket. But my idea was to always truncate the dropdown content with ellipsis - 10 characters tops. Here the example o coordinates:

Screenshot 2026-01-27 at 09.24.56.png (800×762 px, 401 KB)

Why it is ok to truncate: because the value repeats itself, it will be the same as in the description before. Therefore we only need to imply it, and 10 letters should be enough!

okay. but if someone is trying to select a new value in the dropdown, don't they need to see the full text? I need to know what comes after hundred mi.. if my current precision is century. Or is the proposal only to truncate the label when the select is collapsed, and present full labels when the select is active (which I don't know for sure is possible)?

Hi @ArthurTaylor, on the native select that this dropdown calls the values would be complete/not truncated! is this possible?

yeah - makes sense. I'll try that at see what happens.

Arian_Bozorg renamed this task from 🚧 [MEX] M4.1.3 Fix width of popover in time datatype edit dialog to [MEX] M4.1.3 Fix width of popover in time datatype edit dialog.Tue, Jan 27, 10:03 AM

Change #1233667 had a related patch set uploaded (by Arthur taylor; author: Arthur taylor):

[mediawiki/extensions/Wikibase@master] Truncate precision / calendar select input in editableTimeSnakValue

https://gerrit.wikimedia.org/r/1233667

Change #1233667 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Truncate precision / calendar select input in editableTimeSnakValue

https://gerrit.wikimedia.org/r/1233667