Change Details

The current CdxPopover implementation uses the `@floating-ui/vue` library to set the width of the floating component. The implementation uses `autoUpdate` which, per the [[ https://floating-ui.com/docs/vue#manual-updating | docs ]], does not update the width in all situations. In particular, when the wbui2025 code fetches the calculated precision and calendar values from the server, the width of those elements in the popover change which can result in a horizontal scrollbar inside the popover content area. Expose the `update` function of the `@floating-ui/vue` library so that users of the CdxPopup component can manually trigger recalculation of the popup width, and use this function in the editableTimeSnakValue component to gracefully handle changes in the content of the popup. {F71569589} **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.

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: {F71569589} 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 [[ https://github.com/floating-ui/floating-ui | floating-ui ]] to control the 'max-width' property of the popup div. This calculates the max-width as a function of the availableWidth (see [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/popover/Popover.vue#254 | 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.

The current CdxPopover implementation uses the `@floating-ui/vue` library to set the width of the floating component. The implementation uses `autoUpdate` which, per the [[ https://floating-ui.com/docs/vue#manual-updating | docs ]], does not update the width in all situations. In particular, when the wbui2025 code fetches the calculated precision and calendar values from the server,in the editTimeSnakValue overflows triggering a scrollbar when the precision value is changed. the width of those elements inThis is undesired behaviour - we want the popover change which can result in a horizontalup to grow rather than show a scrollbar inside the popoveror wrap content area. Expose the `update` function of the `@floating-ui/vue` library so that users of the CdxPopup component can manually trigger recalculation of the popup width,**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. and usChange this function in the editableTimeSnakValue precision to '100,000 years' The componntent to gracefully handle changes in the content of the popup.is clipped and scrollbar appears as below: {F71569589} 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 [[ https://github.com/floating-ui/floating-ui | floating-ui ]] to control the 'max-width' property of the popup div. This calculates the max-width as a function of the availableWidth (see [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/popover/Popover.vue#254 | 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 p"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.