mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-06-29 19:01:38 +00:00
781bfb857d
* 🩹 fix: Sync ControlCombobox popover width with trigger after layout changes
The popover width was measured once on mount via offsetWidth. When the agent builder side panel opens after a page reload with the sidebar collapsed, the trigger button is initially measured during the layout transition (~26px) and never re-measured, leaving the agent select dropdown rendered at the far left with no options fully visible.
Use a ResizeObserver to keep buttonWidth in sync with the trigger's actual width whenever it resizes, then disconnect on unmount.
* test: cover ControlCombobox isCollapsed, no-ResizeObserver, and zero-width branches
Address review feedback:
- Use button.offsetWidth as the ResizeObserver fallback instead of
entry.contentRect.width to avoid a content-box vs border-box mismatch in
pre-2022 browsers that ship ResizeObserver without borderBoxSize.
- Add tests for the three previously-untested branches: isCollapsed=true
(no observation of the trigger), ResizeObserver unavailable (sync-only
measurement), and zero-width entries (state unchanged).
* test: lock the button.offsetWidth fallback against revert
Add a test that drives the ResizeObserver callback with borderBoxSize
absent and divergent contentRect.width vs offsetWidth (251 vs 275).
The fix would silently revert to entry.contentRect.width without this
test failing, so this pins the chosen fallback semantics.
---------
Co-authored-by: Danny Avila <danny@librechat.ai>
|
||
|---|---|---|
| .. | ||
| DataTable | ||
| Accordion.tsx | ||
| AlertDialog.tsx | ||
| AnimatedSearchInput.tsx | ||
| AnimatedTabs.css | ||
| AnimatedTabs.tsx | ||
| AnimatePopover.css | ||
| Avatar.tsx | ||
| Badge.tsx | ||
| Breadcrumb.tsx | ||
| Button.tsx | ||
| Checkbox.tsx | ||
| CheckboxButton.tsx | ||
| Collapsible.tsx | ||
| Combobox.tsx | ||
| ControlCombobox.spec.tsx | ||
| ControlCombobox.tsx | ||
| DataTable.tsx | ||
| DelayedRender.tsx | ||
| Dialog.tsx | ||
| DialogTemplate.spec.tsx | ||
| DialogTemplate.tsx | ||
| Dropdown.css | ||
| Dropdown.tsx | ||
| DropdownMenu.tsx | ||
| DropdownNoState.tsx | ||
| DropdownPopup.tsx | ||
| FileUpload.tsx | ||
| FilterInput.tsx | ||
| FormInput.tsx | ||
| HoverCard.tsx | ||
| index.ts | ||
| InfoHoverCard.tsx | ||
| Input.tsx | ||
| InputCombobox.tsx | ||
| InputNumber.tsx | ||
| InputOTP.tsx | ||
| InputWithDropDown.tsx | ||
| Label.tsx | ||
| MultiSearch.tsx | ||
| MultiSelect.tsx | ||
| OGDialogTemplate.tsx | ||
| OriginalDialog.tsx | ||
| Pagination.tsx | ||
| PixelCard.tsx | ||
| Progress.tsx | ||
| QuestionMark.tsx | ||
| Radio.tsx | ||
| Resizable.tsx | ||
| SecretInput.tsx | ||
| Select.tsx | ||
| SelectDropDown.tsx | ||
| Separator.tsx | ||
| Skeleton.tsx | ||
| Slider.tsx | ||
| SplitText.spec.tsx | ||
| SplitText.tsx | ||
| Switch.tsx | ||
| Table.tsx | ||
| Tabs.tsx | ||
| Tag.tsx | ||
| Textarea.tsx | ||
| TextareaAutosize.tsx | ||
| ThemeSelector.tsx | ||
| Toast.tsx | ||
| Tooltip.css | ||
| Tooltip.tsx | ||