Prevent modal top from shrinking (#7167)

* fix: prevent modal top from shrinking

* fix: scroll and max height for share modal and popover

* fix: review

app/hooks/useMaxHeight.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import useMobile from "./useMobile";
+import useWindowSize from "./useWindowSize";
+
+const useMaxHeight = ({
+  elementRef,
+  maxViewportPercentage = 90,
+  margin = 16,
+}: {
+  /** The maximum height of the element as a percentage of the viewport. */
+  maxViewportPercentage?: number;
+  /** A ref pointing to the element. */
+  elementRef?: React.RefObject<HTMLElement | null>;
+  /** The margin to apply to the positioning. */
+  margin?: number;
+}) => {
+  const [maxHeight, setMaxHeight] = React.useState<number | undefined>(10);
+  const isMobile = useMobile();
+  const { height: windowHeight } = useWindowSize();
+
+  React.useLayoutEffect(() => {
+    if (!isMobile && elementRef?.current) {
+      const mxHeight = (windowHeight / 100) * maxViewportPercentage;
+
+      setMaxHeight(
+        Math.min(
+          mxHeight,
+          elementRef?.current
+            ? windowHeight -
+                elementRef.current.getBoundingClientRect().top -
+                margin
+            : 0
+        )
+      );
+    } else {
+      setMaxHeight(0);
+    }
+  }, [elementRef, windowHeight, margin, isMobile, maxViewportPercentage]);
+
+  return maxHeight;
+};
+
+export default useMaxHeight;