fix: Fixed 10080 settings sidebar scrolling issue (#10471)

* fix: #10080 settings sidebar scrolling issue

* fix: type error

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* Fixed type error

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Alex van Andel <me@alexvanandel.com>

packages/features/settings/layouts/SettingsLayout.tsx

@@ -185,11 +185,13 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
 interface SettingsSidebarContainerProps {
   className?: string;
   navigationIsOpenedOnMobile?: boolean;
+  bannersHeight?: number;
 }
 
 const SettingsSidebarContainer = ({
   className = "",
   navigationIsOpenedOnMobile,
+  bannersHeight,
 }: SettingsSidebarContainerProps) => {
   const { t } = useLocale();
   const router = useRouter();
@@ -218,6 +220,7 @@ const SettingsSidebarContainer = ({
 
   return (
     <nav
+      style={{ maxHeight: `calc(100vh - ${bannersHeight}px)`, top: `${bannersHeight}px` }}
       className={classNames(
         "no-scrollbar bg-muted fixed bottom-0 left-0 top-0 z-20 flex max-h-screen w-56 flex-col space-y-1 overflow-x-hidden overflow-y-scroll px-2 pb-3 transition-transform max-lg:z-10 lg:sticky lg:flex",
         className,
@@ -473,17 +476,10 @@ export default function SettingsLayout({
       hideHeadingOnMobile
       {...rest}
       SidebarContainer={
-        <>
-          {/* Mobile backdrop */}
-          {sideContainerOpen && (
-            <button
-              onClick={() => setSideContainerOpen(false)}
-              className="fixed left-0 top-0 z-10 h-full w-full bg-black/50">
-              <span className="sr-only">{t("hide_navigation")}</span>
-            </button>
-          )}
-          <SettingsSidebarContainer navigationIsOpenedOnMobile={sideContainerOpen} />
-        </>
+        <SidebarContainerElement
+          sideContainerOpen={sideContainerOpen}
+          setSideContainerOpen={setSideContainerOpen}
+        />
       }
       drawerState={state}
       MobileNavigationContainer={null}
@@ -502,6 +498,36 @@ export default function SettingsLayout({
   );
 }
 
+const SidebarContainerElement = ({
+  sideContainerOpen,
+  bannersHeight,
+  setSideContainerOpen,
+}: SidebarContainerElementProps) => {
+  const { t } = useLocale();
+  return (
+    <>
+      {/* Mobile backdrop */}
+      {sideContainerOpen && (
+        <button
+          onClick={() => setSideContainerOpen(false)}
+          className="fixed left-0 top-0 z-10 h-full w-full bg-black/50">
+          <span className="sr-only">{t("hide_navigation")}</span>
+        </button>
+      )}
+      <SettingsSidebarContainer
+        navigationIsOpenedOnMobile={sideContainerOpen}
+        bannersHeight={bannersHeight}
+      />
+    </>
+  );
+};
+
+type SidebarContainerElementProps = {
+  sideContainerOpen: boolean;
+  bannersHeight?: number;
+  setSideContainerOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
 export const getLayout = (page: React.ReactElement) => <SettingsLayout>{page}</SettingsLayout>;
 
 function ShellHeader() {

packages/features/shell/Shell.tsx

@@ -4,8 +4,8 @@ import dynamic from "next/dynamic";
 import Link from "next/link";
 import type { NextRouter } from "next/router";
 import { useRouter } from "next/router";
-import type { Dispatch, ReactNode, SetStateAction } from "react";
-import React, { Fragment, useEffect, useState, useRef, useMemo } from "react";
+import type { Dispatch, ReactNode, SetStateAction, ReactElement } from "react";
+import React, { Fragment, useEffect, useState, useRef, useMemo, cloneElement } from "react";
 import { Toaster } from "react-hot-toast";
 
 import dayjs from "@calcom/dayjs";
@@ -218,7 +218,11 @@ const Layout = (props: LayoutProps) => {
       <div className="flex min-h-screen flex-col">
         <AppTop setBannersHeight={setBannersHeight} />
         <div className="flex flex-1" data-testid="dashboard-shell">
-          {props.SidebarContainer || <SideBarContainer bannersHeight={bannersHeight} />}
+          {props.SidebarContainer ? (
+            cloneElement(props.SidebarContainer, { bannersHeight })
+          ) : (
+            <SideBarContainer bannersHeight={bannersHeight} />
+          )}
           <div className="flex w-0 flex-1 flex-col">
             <MainContainer {...props} />
           </div>
@@ -240,7 +244,7 @@ type LayoutProps = {
   CTA?: ReactNode;
   large?: boolean;
   MobileNavigationContainer?: ReactNode;
-  SidebarContainer?: ReactNode;
+  SidebarContainer?: ReactElement;
   TopNavContainer?: ReactNode;
   drawerState?: DrawerState;
   HeadingLeftIcon?: ReactNode;