update

mlflow · Dec 15, 2023 · a10715e · a10715e
1 parent 9044e7d
commit a10715e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 13 deletions.
diff --git a/website/src/components/community-section/MLflowLogoAndCards.tsx b/website/src/components/community-section/MLflowLogoAndCards.tsx
@@ -208,16 +208,20 @@ const MobileLayout = () => {
 };
 
 const MLflowLogoAndCards = () => {
-  const [windowWidth, setWindowWidth] = useState(document.body.clientWidth);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
   useEffect(() => {
-    const handleResize = () => setWindowWidth(document.body.clientWidth);
+    const handleResize = () => setWindowWidth(window.innerWidth);
 
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
-  return windowWidth > MOBILE_LAYOUT_BREAKPOINT ? <FullWidthLayout /> : <MobileLayout />;
+  return windowWidth > MOBILE_LAYOUT_BREAKPOINT ? (
+    <FullWidthLayout />
+  ) : (
+    <MobileLayout />
+  );
 };
 
 export default MLflowLogoAndCards;
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -5,6 +5,7 @@ import AutoScroll from "@site/src/components/AutoScroll";
 import FloatingNav from "../components/FloatingNav";
 import { blogs, releases, Post } from "../posts";
 import MLflowLogoAndCards from "../components/community-section/MLflowLogoAndCards";
+import BrowserOnly from "@docusaurus/BrowserOnly";
 
 function Card({
   title,
@@ -361,15 +362,22 @@ const SECTIONS = {
 };
 
 const FlowComponent = () => {
-  const [mobile, setMobile] = useState(false);
+  const [mobile, setMobile] = useState(window.innerWidth <= 996);
+  const [width, setWidth] = useState<number>(undefined);
+
+  const handleResize = () => {
+    setMobile(window.innerWidth <= 996);
+    const imageLeft = document
+      .getElementById("center-image")
+      .getBoundingClientRect().left;
+
+    setWidth(imageLeft);
+  };
 
   useLayoutEffect(() => {
-    const handleResize = () => {
-      setMobile(window.innerWidth <= 996);
-    };
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
-  });
+  }, []);
 
   return mobile ? (
     <div className="container">
@@ -380,25 +388,32 @@ const FlowComponent = () => {
       style={{
         display: "flex",
         justifyContent: "center",
+        // width: "var(--ifm-container-width-xl)",
       }}
     >
       {!mobile && (
         <img
           src="img/flow.svg"
           alt=""
           style={{
-            width: "20%",
+            width: width,
           }}
         />
       )}
-      <img id="center-image" src={IMAGE} style={{ width: "60%" }} alt="" />
+      <img
+        id="center-image"
+        src={IMAGE}
+        style={{ width: "75%", maxWidth: "var(--ifm-container-width-xl)" }}
+        onLoad={handleResize}
+        alt=""
+      />
       {!mobile && (
         <img
           src="img/flow.svg"
           alt=""
           style={{
             transform: `scaleX(-1)`,
-            width: "20%",
+            width: width,
           }}
         />
       )}
@@ -452,7 +467,7 @@ export default function Home(): JSX.Element {
         </div>
       </div>
 
-      <FlowComponent />
+      <BrowserOnly>{() => <FlowComponent />}</BrowserOnly>
       <FloatingNav sections={Object.values(SECTIONS)} />
 
       <div className="container">
@@ -731,7 +746,7 @@ export default function Home(): JSX.Element {
             600+ contributors worldwide
           </div>
           <Spacer />
-          <MLflowLogoAndCards />
+          <BrowserOnly>{() => <MLflowLogoAndCards />}</BrowserOnly>
         </Anchored>
 
         <Spacer />