fix(BaseListItem): fix overflow tooltip

[rivka-ungar]

User description

https://monday.monday.com/boards/3532714909/views/80492480/pulses/18253147838

---

PR Type

Bug fix

---

Description

• Add containerSelector="body" to Tooltip component for proper positioning

• Pass tooltipProps with containerSelector to Text component

• Fix tooltip overflow issues in dropdown list items

---

Diagram Walkthrough

flowchart LR
  A["BaseListItem Tooltip"] -->|add containerSelector| B["Tooltip positioned correctly"]
  C["Text component"] -->|add tooltipProps| D["Text tooltip in body container"]
  B --> E["Fixed overflow behavior"]
  D --> E

Loading

File Walkthrough

	Relevant files
Bug fix	BaseListItem.tsx Add containerSelector to fix tooltip positioning                  packages/core/src/components/BaseListItem/BaseListItem.tsx Add containerSelector="body" prop to Tooltip wrapper component Pass tooltipProps={{ containerSelector: "body" }} to Text component Ensure tooltips render in body container to prevent overflow issues +7/-2

---

[qodo-merge-for-open-source]

PR Reviewer Guide 🔍

(Review updated until commit 8cc35b8)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Prop Precedence Passing both spread tooltipProps and explicit content/position may cause confusion if tooltipProps also includes these keys; verify intended precedence and avoid duplicating props. <Tooltip {...tooltipProps} content={tooltipProps?.content} position={dir === "rtl" ? "right" : "left"} containerSelector="body" Hardcoded Selector containerSelector is hardcoded to "body" on both Tooltip and Text; confirm this is desired for all contexts or make it configurable to avoid breaking embedded/micro-frontend scenarios. containerSelector="body" > <Element id={id} ref={ref} className={listItemClassNames} role={role} {...itemProps} aria-selected={selected}> {itemRenderer ? ( itemRenderer(item) ) : ( <> {startElement && renderSideElement(startElement, disabled, textVariant)} <Text type={textVariant} color="inherit" tooltipProps={{ containerSelector: "body" }}> {label}

[github-actions]

📦 Bundle Size Analysis

✅ No bundle size changes detected.

Unchanged Components

Component	Base	PR	Diff
@vibe/button	17.73KB	17.73KB	0B ➖
@vibe/icon	13.02KB	13.02KB	0B ➖
@vibe/loader	5.81KB	5.81KB	0B ➖
Accordion	6.34KB	6.34KB	0B ➖
AccordionItem	68.05KB	68.05KB	0B ➖
AlertBanner	72.88KB	72.88KB	0B ➖
AlertBannerButton	19.17KB	19.17KB	0B ➖
AlertBannerLink	15.5KB	15.5KB	0B ➖
AlertBannerText	65.49KB	65.49KB	0B ➖
AttentionBox	74.28KB	74.28KB	0B ➖
AttentionBoxLink	15.39KB	15.39KB	0B ➖
Avatar	68.26KB	68.26KB	0B ➖
AvatarGroup	95.8KB	95.8KB	0B ➖
Badge	43.61KB	43.61KB	0B ➖
Box	9.33KB	9.33KB	0B ➖
BreadcrumbItem	66.19KB	66.19KB	0B ➖
BreadcrumbMenu	70.07KB	70.07KB	0B ➖
BreadcrumbMenuItem	79.15KB	79.15KB	0B ➖
BreadcrumbsBar	5.76KB	5.76KB	0B ➖
ButtonGroup	70.18KB	70.18KB	0B ➖
Checkbox	68.39KB	68.39KB	0B ➖
Chips	76.96KB	76.96KB	0B ➖
Clickable	6.27KB	6.27KB	0B ➖
ColorPicker	76.14KB	76.14KB	0B ➖
ColorPickerContent	75.4KB	75.4KB	0B ➖
Combobox	85.8KB	85.8KB	0B ➖
Counter	42.38KB	42.38KB	0B ➖
DatePicker	134.45KB	134.45KB	0B ➖
Dialog	54.06KB	54.06KB	0B ➖
DialogContentContainer	6.31KB	6.31KB	0B ➖
Divider	5.53KB	5.53KB	0B ➖
Dropdown	125.63KB	125.63KB	0B ➖
menu	59.97KB	59.97KB	0B ➖
option	93.09KB	93.09KB	0B ➖
singleValue	93.13KB	93.13KB	0B ➖
EditableHeading	68.1KB	68.1KB	0B ➖
EditableText	68KB	68KB	0B ➖
EmptyState	72.64KB	72.64KB	0B ➖
ExpandCollapse	68.05KB	68.05KB	0B ➖
Flex	7.46KB	7.46KB	0B ➖
FormattedNumber	5.86KB	5.86KB	0B ➖
GridKeyboardNavigationContext	4.65KB	4.65KB	0B ➖
Heading	66.81KB	66.81KB	0B ➖
HiddenText	5.45KB	5.45KB	0B ➖
IconButton	69.93KB	69.93KB	0B ➖
Info	74.15KB	74.15KB	0B ➖
Label	70.31KB	70.31KB	0B ➖
LayerProvider	2.95KB	2.95KB	0B ➖
LegacyModal	76.68KB	76.68KB	0B ➖
LegacyModalContent	66.89KB	66.89KB	0B ➖
LegacyModalFooter	3.45KB	3.45KB	0B ➖
LegacyModalFooterButtons	20.7KB	20.7KB	0B ➖
LegacyModalHeader	72.76KB	72.76KB	0B ➖
Link	15.18KB	15.18KB	0B ➖
List	74.72KB	74.72KB	0B ➖
ListItem	67.32KB	67.32KB	0B ➖
ListItemAvatar	68.51KB	68.51KB	0B ➖
ListItemIcon	14.17KB	14.17KB	0B ➖
ListTitle	66.92KB	66.92KB	0B ➖
Menu	8.69KB	8.69KB	0B ➖
MenuDivider	5.66KB	5.66KB	0B ➖
MenuGridItem	7.22KB	7.22KB	0B ➖
MenuItem	78.99KB	78.99KB	0B ➖
MenuItemButton	71.96KB	71.96KB	0B ➖
MenuTitle	67.08KB	67.08KB	0B ➖
MenuButton	67.66KB	67.66KB	0B ➖
MultiStepIndicator	53.25KB	53.25KB	0B ➖
NumberField	74.86KB	74.86KB	0B ➖
LinearProgressBar	7.45KB	7.45KB	0B ➖
RadioButton	67.63KB	67.63KB	0B ➖
Search	72.4KB	72.4KB	0B ➖
Skeleton	6.17KB	6.17KB	0B ➖
Slider	75.81KB	75.81KB	0B ➖
SplitButton	68.58KB	68.58KB	0B ➖
SplitButtonMenu	8.8KB	8.8KB	0B ➖
Steps	73.4KB	73.4KB	0B ➖
Table	7.29KB	7.29KB	0B ➖
TableBody	68.68KB	68.68KB	0B ➖
TableCell	66.84KB	66.84KB	0B ➖
TableContainer	5.37KB	5.37KB	0B ➖
TableHeader	5.68KB	5.68KB	0B ➖
TableHeaderCell	74.06KB	74.06KB	0B ➖
TableRow	5.58KB	5.58KB	0B ➖
TableRowMenu	70.37KB	70.37KB	0B ➖
TableVirtualizedBody	73.19KB	73.19KB	0B ➖
Tab	65.49KB	65.49KB	0B ➖
TabList	8.93KB	8.93KB	0B ➖
TabPanel	5.34KB	5.34KB	0B ➖
TabPanels	5.92KB	5.92KB	0B ➖
TabsContext	5.54KB	5.54KB	0B ➖
Text	66.66KB	66.66KB	0B ➖
TextArea	68.01KB	68.01KB	0B ➖
TextField	71.29KB	71.29KB	0B ➖
TextWithHighlight	65.86KB	65.86KB	0B ➖
ThemeProvider	4.69KB	4.69KB	0B ➖
Tipseen	73.14KB	73.14KB	0B ➖
TipseenContent	73.6KB	73.6KB	0B ➖
TipseenImage	73.44KB	73.44KB	0B ➖
TipseenMedia	73.32KB	73.32KB	0B ➖
TipseenWizard	75.9KB	75.9KB	0B ➖
Toast	76.11KB	76.11KB	0B ➖
ToastButton	19KB	19KB	0B ➖
ToastLink	15.38KB	15.38KB	0B ➖
Toggle	68.41KB	68.41KB	0B ➖
Tooltip	64.66KB	64.66KB	0B ➖
TransitionView	37.67KB	37.67KB	0B ➖
VirtualizedGrid	12.61KB	12.61KB	0B ➖
VirtualizedList	12.37KB	12.37KB	0B ➖

---

📊 Summary:

• Total Base Size: 5.13MB
• Total PR Size: 5.13MB
• Total Difference: +0B

[github-actions]

A new prerelease version of this PR has been published! 🎉
To install this prerelease version, run the following command in your terminal with any one of the packages changed in this PR:

To update @vibe/button:

yarn add @vibe/[email protected]

Or with npm:

npm i @vibe/[email protected]

To update @vibe/icon:

yarn add @vibe/[email protected]

Or with npm:

npm i @vibe/[email protected]

To update @vibe/loader:

yarn add @vibe/[email protected]

Or with npm:

npm i @vibe/[email protected]

To update @vibe/config:

yarn add @vibe/[email protected]

Or with npm:

npm i @vibe/[email protected]

To update @vibe/core:

yarn add @vibe/[email protected]

Or with npm:

npm i @vibe/[email protected]

To update @vibe/docs:

yarn add @vibe/[email protected]

Or with npm:

npm i @vibe/[email protected]

To update @vibe/shared:

yarn add @vibe/[email protected]

Or with npm:

npm i @vibe/[email protected]

To update vibe-storybook-components:

yarn add [email protected]

Or with npm:

npm i [email protected]

To update monday-ui-style:

yarn add [email protected]

Or with npm:

npm i [email protected]

To update @vibe/testkit:

yarn add @vibe/[email protected]

Or with npm:

npm i @vibe/[email protected]