Fix: EE issues

packages/design-system/src/components/cookiesLanding/cookiesLandingWrapper.tsx

@@ -69,9 +69,9 @@ const CookiesLandingWrapper = ({
         </div>
         {description && (
           <div className="text-center px-4 flex items-center justify-center -mt-2 mb-10">
-            <p className="lg:max-w-[450px] text-gray dark:text-bright-gray">
+            <div className="lg:max-w-[450px] text-gray dark:text-bright-gray">
               {description}
-            </p>
+            </div>
           </div>
         )}
         <div className="lg:max-w-[729px] mx-auto flex justify-center flex-col mt-2 pb-10 px-4">

packages/design-system/src/components/draggableTray/index.tsx

@@ -51,11 +51,11 @@ const DraggableTray = forwardRef<
 
   const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
 
-  const [height, setHeight] = useState<string | undefined>('20%');
+  const [height, setHeight] = useState<string | undefined>('30%');
 
   useEffect(() => {
     if (!isCollapsed) {
-      setHeight('20%');
+      setHeight('30%');
     }
   }, [isCollapsed]);
 
@@ -72,7 +72,7 @@ const DraggableTray = forwardRef<
     <Resizable
       defaultSize={{
         width: '100%',
-        height: '20%',
+        height: '30%',
       }}
       onResizeStop={(_, __, ___, d) => {
         setHeight(() => `calc(${height} + ${d.height}px)`);
@@ -98,7 +98,13 @@ const DraggableTray = forwardRef<
             />
           </button>
         </div>
-        {!isCollapsed && ActiveTabContent && <ActiveTabContent {...props} />}
+        <div
+          style={{
+            height: isCollapsed ? '0px' : 'calc(100% - 30px)',
+          }}
+        >
+          {ActiveTabContent && <ActiveTabContent {...props} />}
+        </div>
       </div>
     </Resizable>
   );

packages/explorable-explanations/src/protectedAudience/index.js

@@ -673,6 +673,10 @@ export const interestGroupSketch = (p) => {
       }
     }
 
+    if (props.setIsBubbleExpanded) {
+      app.setIsBubbleExpanded = props.setIsBubbleExpanded;
+    }
+
     if (props.setCurrentStep) {
       app.setCurrentStep = props.setCurrentStep;
     }

packages/explorable-explanations/src/protectedAudience/modules/bubbles.js

@@ -358,6 +358,7 @@ bubbles.reverseBarrageAnimation = async (index) => {
 bubbles.showExpandedBubbles = () => {
   bubbles.clearAndRewriteBubbles();
   bubbles.generateBubbles(true);
+  app.setIsBubbleExpanded(true);
 
   app.bubbles.expandedSVG = bubbles.bubbleChart(app.bubbles.positions, {
     label: (d) =>
@@ -389,6 +390,8 @@ bubbles.showExpandedBubbles = () => {
 bubbles.showMinifiedBubbles = () => {
   app.setHighlightedInterestGroup(null);
   app.bubbles.highlightedInterestGroup = null;
+  app.setIsBubbleExpanded(false);
+
   app.bubbles.minifiedSVG = bubbles.bubbleChart(app.bubbles.positions, {
     label: (d) =>
       [

packages/extension/src/view/devtools/app.css

@@ -58,13 +58,17 @@
 }
 
 .markdown-body {
-
   --bgColor-default: #ffffff;
   --bgColor-muted: #fbfbfb;
   --fgColor-default: #000000;
   --bgColor-neutral-muted: #fbfbfb;
 
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     scroll-margin-top: 20px;
   }
 
@@ -103,7 +107,6 @@
   h6 {
     font-size: 12px;
   }
-
 }
 
 body {
@@ -184,7 +187,7 @@ body {
 }
 
 .circle-svg {
-  transition: transform .2s;
+  transition: transform 0.2s;
 }
 
 .circle-svg:hover {
@@ -200,12 +203,12 @@ text {
   position: absolute;
   display: block;
   top: var(--expandedBubbleY);
+  left: var(--expandedBubbleX);
   height: var(--expandedBubbleWidth);
   width: var(--expandedBubbleWidth);
   border-radius: 50%;
   border: 1px solid #808080;
   backdrop-filter: blur(10px);
-  left: var(--expandedBubbleX)
 }
 
 .bubble-container {
@@ -214,6 +217,7 @@ text {
 }
 
 .bubble-container.expanded {
+  position: absolute;
   backdrop-filter: blur(1px);
   z-index: 4;
   height: 100vh;

packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/panel.tsx

@@ -31,6 +31,7 @@ import {
   sketch as mainSketch,
 } from '@google-psat/explorable-explanations';
 import { ReactP5Wrapper } from '@p5-wrapper/react';
+import classNames from 'classnames';
 import { DraggableTray, useTabs } from '@google-psat/design-system';
 
 /**
@@ -95,6 +96,7 @@ const Panel = ({
   const [expandedBubbleWidth, setBubbleWidth] = useState(0);
   const [expandedBubbleX, setExpandedBubbleX] = useState(0);
   const [expandedBubbleY, setExpandedBubbleY] = useState(0);
+  const [isBubbleExpanded, setIsBubbleExpanded] = useState(false);
 
   const setPlaying = useCallback(() => {
     setPlay((prevState) => {
@@ -161,35 +163,44 @@ const Panel = ({
         const containerWidth = containerRef.current.offsetWidth;
         const containerHeight = containerRef.current.offsetHeight;
         const newSize = Math.min(containerWidth, containerHeight) / 2;
-        const centerX = (containerWidth - newSize) / 4;
-        const centerY = (containerHeight - newSize) / 4;
 
         setBubbleWidth(newSize);
-        setExpandedBubbleX(centerX);
-        setExpandedBubbleY(centerY);
       }
     });
   }, []);
 
+  const getDivDimensions = useCallback(() => {
+    if (!divRef.current) {
+      return {
+        visibleWidth: 0,
+        visibleHeight: 0,
+        newSize: 0,
+      };
+    }
+
+    const divRect = divRef.current.getBoundingClientRect();
+    const visibleWidth = Math.max(
+      0,
+      Math.min(divRect.right, window.innerWidth) - Math.max(divRect.left, 0)
+    );
+    const visibleHeight = Math.max(
+      0,
+      Math.min(divRect.bottom, window.innerHeight) - Math.max(divRect.top, 0)
+    );
+    const newSize = Math.min(visibleWidth, visibleHeight) / 2;
+
+    return {
+      visibleWidth,
+      visibleHeight,
+      newSize,
+    };
+  }, []);
+
   useEffect(() => {
     if (divRef.current) {
-      const divRect = divRef.current.getBoundingClientRect();
-      const visibleWidth = Math.max(
-        0,
-        Math.min(divRect.right, window.innerWidth) - Math.max(divRect.left, 0)
-      );
-      const visibleHeight = Math.max(
-        0,
-        Math.min(divRect.bottom, window.innerHeight) - Math.max(divRect.top, 0)
-      );
-
-      const newSize = Math.min(visibleWidth, visibleHeight) / 2;
-      const centerX = (visibleWidth - newSize) / 4;
-      const centerY = (visibleHeight - newSize) / 4;
+      const { newSize } = getDivDimensions();
 
       setBubbleWidth(newSize);
-      setExpandedBubbleX(centerX);
-      setExpandedBubbleY(centerY);
     }
 
     if (containerRef.current) {
@@ -204,7 +215,22 @@ const Panel = ({
         handleResizeCallback.unobserve(containerRefCopy.current);
       }
     };
-  }, [handleResizeCallback]);
+  }, [getDivDimensions, handleResizeCallback]);
+
+  useEffect(() => {
+    if (isBubbleExpanded) {
+      const div = divRef.current;
+
+      if (div) {
+        const { visibleWidth, visibleHeight, newSize } = getDivDimensions();
+        const centerX = visibleWidth / 2 - newSize;
+        const centerY = visibleHeight / 4 - newSize / 4;
+
+        setExpandedBubbleX(div.scrollLeft + centerX);
+        setExpandedBubbleY(div.scrollTop + centerY);
+      }
+    }
+  }, [getDivDimensions, isBubbleExpanded]);
 
   const resetHandler = useCallback(() => {
     app.reset();
@@ -272,7 +298,13 @@ const Panel = ({
         extraInterface={extraInterface}
       />
       <div className="w-full h-full">
-        <main className="h-full w-full overflow-auto relative" ref={divRef}>
+        <main
+          className={classNames('h-full w-full relative', {
+            'overflow-hidden': isBubbleExpanded,
+            'overflow-auto': !isBubbleExpanded,
+          })}
+          ref={divRef}
+        >
           <div id="ps-canvas">
             <div id="canvas-container" />
           </div>
@@ -322,6 +354,7 @@ const Panel = ({
         sketch={interestGroupSketch}
         expandedBubbleX={expandedBubbleX}
         expandedBubbleY={expandedBubbleY}
+        setIsBubbleExpanded={setIsBubbleExpanded}
         expandedBubbleWidth={expandedBubbleWidth}
         speedMultiplier={2 * sliderStep}
         setCurrentSite={setCurrentSite}

packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/index.tsx

@@ -65,6 +65,7 @@ const ProtectedAudience = () => {
         title: 'Explorable Explanations',
         content: {
           Element: ExplorableExplanation,
+          className: 'overflow-hidden',
         },
       },
       {