Fix Hint Popup Location in Tutorials (#10243)

Previously, the top location of this popup was simply "unset". Sometimes it'd happen to be in the correct location (I think because of how other elements are laid out in the DOM), but often times it wouldn't line up correctly. Rather than relying on that somewhat ill-defined behavior, this just sets the top directly so it's underneath the tutorial window.

I spent half a day trying to get this more in the css and less in the typescript, but I wasn't making progress so I decided to leave it be for now. I have other bugs to work on :)

webapp/src/components/tutorial/TutorialCallout.tsx

@@ -30,6 +30,10 @@ export function TutorialCallout(props: TutorialCalloutProps) {
                 setMaxHeight("90vh");
             } else {
                 setBottom("unset");
+
+                // Set the top of the hint to the bottom of wrapper div (which aligns to the hint button).
+                const popupBottom = popupRef.current?.getBoundingClientRect().bottom;
+                setTop(popupBottom ? `${popupBottom}px` : "unset");
             }
         }
 
@@ -93,4 +97,4 @@ export function TutorialCallout(props: TutorialCalloutProps) {
         {visible && <div className="tutorial-callout-mask" onClick={closeCallout} />}
     </div>
 
-}
+}