Fix: Double Scrollbars and Overflow when extending the Sidebar (#3323)

* fix(web):  Double Scrollbars and Overflow when extending the Sidebar

* fix(web): The mainHeaderSlot content is not being rendered

apps/web/lib/layout/main-layout.tsx

@@ -3,7 +3,7 @@
 import { cn } from '@/lib/utils';
 import { Toaster, ToastMessageManager } from '@components/ui/toaster';
 import { Container, Divider, Meta } from 'lib/components';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useRef, ReactNode } from 'react';
 import { Footer, Navbar } from '.';
 import { useAtomValue } from 'jotai';
 import { fullWidthState } from '@app/stores/fullWidth';
@@ -19,6 +19,8 @@ type Props = PropsWithChildren<{
 	className?: string;
 	childrenClassName?: string;
 	footerClassName?: string;
+	mainHeaderSlot?: JSX.Element | ReactNode;
+	mainHeaderSlotClassName?: string;
 }>;
 
 export function MainLayout({
@@ -29,9 +31,12 @@ export function MainLayout({
 	notFound,
 	className,
 	childrenClassName,
+	mainHeaderSlot,
+	mainHeaderSlotClassName = '',
 	footerClassName = ''
 }: Props) {
 	const fullWidth = useAtomValue(fullWidthState);
+	const headerRef = useRef<HTMLDivElement>(null);
 	return (
 		<div className="w-full h-full overflow-x-hidden min-w-fit">
 			<style jsx global>
@@ -61,25 +66,35 @@ export function MainLayout({
 				<AppSidebar publicTeam={publicTeam || false} />
 
 				<SidebarInset>
-					<header
-						className={cn(
-							'flex max-h-fit flex-col flex-1 sticky z-50 my-auto inset-x-0 w-full  top-0 h-16 shrink-0 justify-start gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 bg-white dark:bg-dark-high  !mx-0 nav-items--shadow dark:border-b-[0.125rem] dark:border-b-[#26272C]',
-							!fullWidth ? 'lg:px-8' : 'px-8'
-						)}
-					>
-						<Navbar
+					<div ref={headerRef} className="min-h-fit h-max">
+						<header
 							className={cn(
-								'flex items-center justify-end w-full transition-all h-max',
-								!fullWidth ? 'x-container mx-auto' : '!mx-0'
+								'flex max-h-fit flex-col flex-1 sticky z-50 my-auto inset-x-0 w-full min-h-[80px] top-0 h-fit shrink-0 justify-start gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 bg-white dark:bg-dark-high  !mx-0 nav-items--shadow dark:border-b-[0.125rem] dark:border-b-[#26272C]',
+								!fullWidth ? 'lg:px-8' : 'px-8'
 							)}
-							showTimer={showTimer}
-							publicTeam={publicTeam || false}
-							notFound={notFound || false}
-						/>
-					</header>
+						>
+							<Navbar
+								className={cn(
+									'flex items-center justify-end w-full transition-all h-max',
+									!fullWidth ? 'x-container mx-auto' : '!mx-0'
+								)}
+								showTimer={showTimer}
+								publicTeam={publicTeam || false}
+								notFound={notFound || false}
+							/>
+						</header>
+						{mainHeaderSlot ? <div className={cn(mainHeaderSlotClassName)}>{mainHeaderSlot}</div> : null}
+					</div>
+
 					<div className={cn('flex flex-1 flex-col gap-4 p-4 h-max pt-5', className)}>
 						<MainSidebarTrigger />
-						<div className={cn('min-h-[100vh] flex-1', childrenClassName)}>{children}</div>
+						{/* Warning: this is to remove the unwanted double scroll on the Dashboard */}
+						<div
+							className={cn('min-h-[calc(100vh_-_240px)] h-full flex flex-col flex-1', childrenClassName)}
+							style={mainHeaderSlot ? { marginTop: `${headerRef?.current?.offsetHeight}px` } : undefined}
+						>
+							{children}
+						</div>
 					</div>
 					<Container
 						fullWidth={fullWidth}