Fix tooltip overflow

[angrycat9000]

Changes

Fixes #1644 by updating the popper preventOverflow and flip modifiers to include an extra 2px padding on each side to account for the expanded .MuiTooltip-tooltip::before element. See #1644 (comment)

Both flip and preventOverflow are needed to be adjusted, otherwise preventOverflow stops working 2px before flip kicks in and move the tooltip to the other side. During those 2px the scrollbar appears. Can see this by setting placement="right". and slowly shrinking the viewport.

Testing

1. Change Tooltip.default.tsx to the following.
2. Run docs and go to http://localhost:4321/docs/examples/mui/Tooltip.default
3. Size the window to 480px wide
4. Hover over the icon and make sure a scrollbar does not appear with the tooltip.

import { Box, Container, IconButton, Tooltip } from "@mui/material";
import { Icon } from "@stratakit/mui";

import svgPlaceholder from "@stratakit/icons/placeholder.svg";

export default () => {
	return (
		<Container maxWidth="sm" sx={{ mt: 4, border: "1px solid #bbb", p: 2 }}>
			<Box
				style={{
					position: "relative",
					height: 140,
					display: "flex",
					alignItems: "center",
					justifyContent: "flex-end",
				}}
			>
				<Tooltip title="A normal tooltip that affects height">
					<IconButton aria-label="Search for something" onClick={() => {}}>
						<Icon href={svgPlaceholder} />
					</IconButton>
				</Tooltip>
			</Box>
		</Container>
	);
};

[angrycat9000]

Bump @GerardasB can you take a review on this? Thanks