diff --git a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss index 2b7fe333..d0b41f6c 100644 --- a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss @@ -3,10 +3,10 @@ .root { .content { display: flex; - .sides { min-height: calc(100vh - 83px); - flex: 1; + height: fit-content; + width: 50%; @media (max-width: $screen-m) { width: 100%; } diff --git a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx index e306a02b..26215f09 100644 --- a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx @@ -5,6 +5,7 @@ import Image, { StaticImageData } from "next/image"; import React, { ReactNode, useEffect, useRef } from "react"; import classes from "./classes.module.scss"; +import { useWindowSize } from "@uidotdev/usehooks"; type IProps = { title: string; @@ -30,9 +31,22 @@ export default function DefaultDoubleSidePage(props: IProps) { useEffect(() => { // make second element ref height same as first element ref height - if (firstElementRef.current && secondElementRef.current) { - secondElementRef.current.style.height = `${firstElementRef.current.clientHeight}px`; + const resizeObserver = new ResizeObserver(() => { + if (secondElementRef.current && firstElementRef.current) { + console.log("Recalculate"); + if (secondElementRef.current.clientHeight !== 0) { + secondElementRef.current.style.height = `0px`; + } + + secondElementRef.current.style.height = `${firstElementRef.current.clientHeight}px`; + } + }); + + if (firstElementRef.current) { + resizeObserver.observe(firstElementRef.current); } + + return () => resizeObserver.disconnect(); }, []); const firstElementRef = useRef(null);