Fix Tooltip to Allow Text Wrapping (#425)

This PR allows the tooltip to wrap when the text is too long, as opposed
to getting cut off by the end of the screen. I've attached some screen
shots to show some of the edge cases. This tooltip closes on scroll, and
will work as expected in different scrolled positions. Although it has
"fixed" positioning, react-tooltip ensures that scroll behavior works as
expected. The tooltip has also now been moved to above the tooltip,
which was approved by Product.

Here is a
[loom](https://www.loom.com/share/aa85ab84a26f4b608e76a66c35ea03ea?sid=1f7bd308-0fef-4a68-aaab-1ae72f1dee39)
of some of the behavior in different edge cases.

This PR also addresses a small bug where if the side panel becomes small
enough, the undefined menu button and the info icon would overlap. To
get around this, right margin was added to the icon. Some left padding
from the icon was also removed since the gap was a little awkward.

J=SLAP-2958
TEST=manual

packages/studio-ui/src/components/common/TooltipIcon.tsx

@@ -12,12 +12,18 @@ export default function TooltipIcon({ content }: TooltipIconProps) {
 
   return (
     <div>
-      <Info id={tooltipId} className="ml-3 pb-1" data-testid="prop-tooltip" />
+      <Info
+        id={tooltipId}
+        className="ml-1 pb-1 mr-4"
+        data-testid="prop-tooltip"
+      />
       <Tooltip
-        className="bg-black z-20"
+        className="bg-black z-20 max-w-[23.5%]"
         anchorId={tooltipId}
         content={content}
-        place="left"
+        place="top"
+        closeOnScroll={true}
+        positionStrategy="fixed"
       />
     </div>
   );