bad jquery way of dealing with scrolled state of output and stable html

- also add tooltip to make it MUCH EASIER to toggle scrolled state.
  Duh.

Author: williamstein

src/packages/frontend/jupyter/cell-output-toggle.tsx

@@ -43,7 +43,18 @@ export const OutputToggle: React.FC<OutputToggleProps> = React.memo(
     }
 
     return (
-      <Tooltip title="Click to toggle whether large output is scrolled. Double click to hide.">
+      <Tooltip
+        title={
+          <>
+            Click{" "}
+            <a onClick={toggle_scrolled}>
+              to {scrolled ? "show" : "hide"} large output
+            </a>
+            .<br />
+            Double click <a onClick={collapse_output}>to hide</a>.
+          </>
+        }
+      >
         <Button
           type="text"
           style={scrolled ? SCROLLED_STYLE : NORMAL_STYLE}

src/packages/frontend/jupyter/output-messages/stable-unsafe-html.tsx

@@ -130,7 +130,25 @@ export default function StableUnsafeHtml({
         eltRect.width,
         parentRect.right - SCROLL_WIDTH - eltRect.left,
       );
-      const bottom = Math.min(eltRect.height, parentRect.bottom - eltRect.top);
+
+      // .closest('.a');
+      //const bottom = Math.min(eltRect.height, parentRect.bottom - eltRect.top);
+      // We do this so that if the output is COLLAPSED, then the html doesn't
+      // go outside the shortened div.  We do not do anything regarding making
+      // scroll work in there though -- if you want to see the whole thing, you
+      // must not collapse it.
+      const containerRect = $(divRef.current)
+        .closest(".cocalc-jupyter-rendered")[0]
+        ?.getBoundingClientRect();
+      const bottom = Math.max(
+        top,
+        Math.min(
+          eltRect.height,
+          (containerRect?.bottom ?? parentRect.bottom) - eltRect.top,
+          parentRect.bottom - eltRect.top,
+        ),
+      );
+
       const left = Math.max(0, parentRect.left - eltRect.left);
 
       // Apply clip-path to elt to make it visible only inside of parentRect: