fix: tests and use portalTarget instead of window height

Author: lisalupi

packages/ui/src/components/Menu/MenuContent.tsx

@@ -262,19 +262,12 @@ export const Menu = forwardRef(
       if (disclosureRef.current && placement === 'bottom' && !noShrink) {
         const disclosureRect = disclosureRef.current.getBoundingClientRect()
         const disclosureBottom = disclosureRect.bottom
-        const windowSize = window.innerHeight
+        const targetSize = portalTarget.getBoundingClientRect().bottom
         const availableSpace =
-          windowSize - disclosureBottom - SPACE_DISCLOSURE_POPUP
-
+          targetSize - disclosureBottom - SPACE_DISCLOSURE_POPUP
         setPopupMaxHeight(`${availableSpace}px`)
       }
-    }, [
-      isVisible,
-      portalTarget.scrollHeight,
-      disclosureRef,
-      placement,
-      noShrink,
-    ])
+    }, [isVisible, portalTarget, disclosureRef, placement, noShrink])
 
     return (
       <StyledPopup

packages/ui/src/components/Menu/__stories__/Shrink.stories.tsx

@@ -30,7 +30,7 @@ Shrink.parameters = {
   docs: {
     description: {
       story:
-        'When the menu is at the bottom of a page (with `placement = "bottom"`), it will shrink so that it does not cause overflow. It is possible to removet this feature using prop `noShrink`',
+        'When the menu is at the bottom of a page (not possible to scroll down further), with `placement = "bottom"`, it will shrink so that it does not cause overflow. It is possible to remove this feature using prop `noShrink`',
     },
   },
 }

packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap

@@ -2266,7 +2266,7 @@ exports[`Tabs > renders correctly with Tabs with prop 1`] = `
   text-align: center;
   position: absolute;
   max-width: 14.5rem;
-  max-height: 30rem;
+  max-height: -24px;
   overflow: auto;
   overflow-wrap: break-word;
   font-size: 0.8rem;
@@ -2338,7 +2338,7 @@ exports[`Tabs > renders correctly with Tabs with prop 1`] = `
   flex-direction: column;
   overflow-y: auto;
   overflow-x: hidden;
-  max-height: calc(30rem - 0.25rem);
+  max-height: calc(min(30rem, -24px) - 0.25rem);
   background-color: #ffffff;
   color: #3f4250;
   border-radius: 0.25rem;
@@ -2521,7 +2521,7 @@ exports[`Tabs > renders correctly with Tabs with prop 1`] = `
   text-align: center;
   position: absolute;
   max-width: 14.5rem;
-  max-height: 30rem;
+  max-height: -24px;
   overflow: auto;
   overflow-wrap: break-word;
   font-size: 0.8rem;
@@ -2593,7 +2593,7 @@ exports[`Tabs > renders correctly with Tabs with prop 1`] = `
   flex-direction: column;
   overflow-y: auto;
   overflow-x: hidden;
-  max-height: calc(30rem - 0.25rem);
+  max-height: calc(min(30rem, -24px) - 0.25rem);
   background-color: #ffffff;
   color: #3f4250;
   border-radius: 0.25rem;
@@ -3469,7 +3469,7 @@ exports[`Tabs > renders correctly with Tabs with prop 1`] = `
   text-align: center;
   position: absolute;
   max-width: 14.5rem;
-  max-height: 30rem;
+  max-height: -24px;
   overflow: auto;
   overflow-wrap: break-word;
   font-size: 0.8rem;
@@ -3541,7 +3541,7 @@ exports[`Tabs > renders correctly with Tabs with prop 1`] = `
   flex-direction: column;
   overflow-y: auto;
   overflow-x: hidden;
-  max-height: calc(30rem - 0.25rem);
+  max-height: calc(min(30rem, -24px) - 0.25rem);
   background-color: #ffffff;
   color: #3f4250;
   border-radius: 0.25rem;