Firewall rules table: use + popup for overflow when there are too many targets/filters

[david-crespo]

Right now they stack and can overflow the cell.

[benjaminleonard]

Do we want to make this a generic cell component that can handle overflow + popup? We've got it in a few places.

[david-crespo]

We sort of have that already. We take the first child and show it in the cell and put the rest in the popup. No rest, no popup. I wouldn't want to make it smarter than that because that logic about what to put in cell vs. popup seems pretty specific to each call site.

console/app/components/ListPlusCell.tsx

Lines 21 to 39 in 7383152

	export const ListPlusCell = ({ tooltipTitle, children }: ListPlusCellProps) => {
	const [first, ...rest] = React.Children.toArray(children)
	const content = (
	<div>
	<div className="mb-2">{tooltipTitle}</div>
	{...rest}
	</div>
	)
	return (
	<div className="flex items-baseline gap-2">
	{first}
	{rest.length > 0 && (
	<Tooltip content={content} placement="bottom">
	<div className="text-mono-sm">+{rest.length}</div>
	</Tooltip>
	)}
	</div>
	)
	}