max height changes

src/components/header/index.jsx

@@ -37,7 +37,7 @@ function Header({ isOpen }) {
     }, []);
 
     return (
-        <div className="flex items-center justify-between py-5 px-10" >
+        <div className="flex items-center justify-between py-5 px-10 fixed bg-white w-full" >
             <Link to={"/dashboard"}><img src="/logo.png" /></Link>
             <div className="flex items-center relative">
                 <button ref={logoutRef} className=" -mt-1 text-2xl flex" onClick={() => setOpen(!open)}>

src/components/sidebar/index.jsx

 import React from "react";
 import { Link } from "react-router-dom";
-import { useSelector } from "react-redux";
+import SetWindowSize from '../../utils/SetWindowSize';
 
 function Sidebar() {
-  const user = useSelector((state) => state.userDetails.user);
+  const  [windowWidth, windowHeight] = SetWindowSize();
 
   return (
-    <div className="w-[20%] flex items-center flex-col">
+    <div className="w-[20%] flex items-center flex-col overflow-auto" style={{ height: `calc(${windowHeight}px - 87px)` }}>
       <nav
         className="hs-accordion-group p-6 w-full flex flex-col flex-wrap"
         data-hs-accordion-always-open

src/index.css

@@ -23,6 +23,3 @@ code {
   display: inline-block;
 }
 
-.childDiv {
-  max-height: calc(100vh - 85px);
-}

src/pages/layout/index.jsx

@@ -2,9 +2,12 @@ import React, { useState } from 'react'
 import Header from '../../components/header';
 import Sidebar from '../../components/sidebar';
 import LeftSidebar from '../../components/leftSidebar';
+import SetWindowSize from '../../utils/SetWindowSize';
 
 function Layout({children}) {
-    const  [isOpen, setIsOpen] = useState(false)
+    const  [isOpen, setIsOpen] = useState(false);
+    const  [windowWidth, windowHeight] = SetWindowSize();
+
     const handleLogoutOpen=()=>{
        setIsOpen(false)
     }
@@ -12,9 +15,9 @@ function Layout({children}) {
     return (
         <div className='max-h-[84vh]' onClick={handleLogoutOpen}>
             <Header isOpen={isOpen} />
-            <div className="flex">
+            <div className="flex pt-[85px]">
                 <Sidebar/>
-                <div className="bg-[#E9EDEE] w-full" style={{height:"88vh"}}>
+                <div className="bg-[#E9EDEE] w-full overflow-auto" style={{ height: `calc(${windowHeight}px - 87px)` }}>
                     {children}
                 </div>
                 {url.includes('/viewreportee') && <LeftSidebar/>}