From 798466a696babd0857454c1dac921605cf5894b2 Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Tue, 26 Jul 2022 09:48:40 +0200
Subject: [PATCH] fix: various css for the sidebar

---
 packages/website/src/components/CodeListing.tsx   |  2 +-
 packages/website/src/components/DocContainer.tsx  |  2 +-
 packages/website/src/components/ItemSidebar.tsx   |  4 ++--
 packages/website/src/components/ListSidebar.tsx   | 12 ++++++------
 packages/website/src/components/Section.tsx       |  9 +++++----
 packages/website/src/components/SidebarLayout.tsx |  4 ++--
 6 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/website/src/components/CodeListing.tsx b/packages/website/src/components/CodeListing.tsx
index ed17c12fa..c9b6b4caa 100644
--- a/packages/website/src/components/CodeListing.tsx
+++ b/packages/website/src/components/CodeListing.tsx
@@ -30,7 +30,7 @@ export function CodeListing({
 				<div className="w-full flex flex-row gap-3">
 					<h4 className="font-mono m-0">{`${name}`}</h4>
 					<h4 className="m-0">{separator}</h4>
-					<h4 className="font-mono m-0">
+					<h4 className="font-mono m-0 break-all">
 						<HyperlinkedText tokens={typeTokens} />
 					</h4>
 				</div>
diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx
index d2e380fb0..fada37bbe 100644
--- a/packages/website/src/components/DocContainer.tsx
+++ b/packages/website/src/components/DocContainer.tsx
@@ -42,7 +42,7 @@ export function DocContainer({ name, kind, excerpt, summary, typeParams, childre
 					<div className="flex flex-row items-center dark:text-white gap-3">
 						<h3 className="m-0">Extends:</h3>
 						<h3 className="m-0">{CodeListingSeparatorType.Type}</h3>
-						<p className="font-mono">
+						<p className="font-mono break-all">
 							<HyperlinkedText tokens={extendsTokens} />
 						</p>
 					</div>
diff --git a/packages/website/src/components/ItemSidebar.tsx b/packages/website/src/components/ItemSidebar.tsx
index 72f55b62a..d1c121036 100644
--- a/packages/website/src/components/ItemSidebar.tsx
+++ b/packages/website/src/components/ItemSidebar.tsx
@@ -19,7 +19,7 @@ function onMenuClick() {
 
 export function ItemSidebar({ packageName, data, selectedMember }: ItemListProps) {
 	return (
-		<div className="flex flex-col max-h-full grow min-w-[270px] lg:border-r-solid border-0.5 border-gray">
+		<div className="flex flex-col min-h-full max-h-full grow min-w-[270px] lg:border-r-solid border-0.5 border-gray">
 			<div className="border-b-0.5 border-gray py-2">
 				<h2 className="flex gap-2 items-center m-0 px-2 dark:text-white">
 					<VscPackage />
@@ -29,7 +29,7 @@ export function ItemSidebar({ packageName, data, selectedMember }: ItemListProps
 					<FiMenu size={32} />
 				</button>
 			</div>
-			<div className="hidden lg:block lg:min-h-full overflow-y-scroll overflow-x-clip p-7 space-y-2">
+			<div className="hidden lg:block lg:min-h-full overflow-y-auto overflow-x-clip py-7 px-4">
 				<ListSidebar members={data.members} title="test" selectedMember={selectedMember} />
 			</div>
 		</div>
diff --git a/packages/website/src/components/ListSidebar.tsx b/packages/website/src/components/ListSidebar.tsx
index 514359f2a..fe81bdd2d 100644
--- a/packages/website/src/components/ListSidebar.tsx
+++ b/packages/website/src/components/ListSidebar.tsx
@@ -63,7 +63,7 @@ export function ListSidebarSection({ members, selectedMember, title }: ListSideb
 	return (
 		<div>
 			<h3
-				className="flex items-center dark:text-white m-0 text-sm font-semibold gap-2"
+				className="flex items-center dark:text-white m-0 py-3 font-semibold gap-2 cursor-pointer"
 				onClick={() => setShowList(!showList)}
 			>
 				{showList ? <VscChevronDown size={20} /> : <VscChevronRight size={20} />}
@@ -72,7 +72,7 @@ export function ListSidebarSection({ members, selectedMember, title }: ListSideb
 			<AnimatePresence exitBeforeEnter initial={false}>
 				{showList ? (
 					<motion.div
-						className="ml-7 mt-2 space-y-3"
+						className="ml-7 space-y-3"
 						transition={{ duration: 0.5, ease: [0.04, 0.62, 0.23, 0.98] }}
 						key="content"
 						initial="collapsed"
@@ -96,9 +96,9 @@ export function ListSidebarSection({ members, selectedMember, title }: ListSideb
 							>
 								<Link href={member.path}>
 									<a
-										className={`no-underline m-0 text-sm ${
+										className={`no-underline m-0 text-sm font-semibold ${
 											selectedMember === member.name
-												? 'text-blue-500 dark:text-blue-300 font-semibold'
+												? 'text-blue-500 dark:text-blue-300'
 												: 'text-gray-500 dark:text-gray-300 hover:text-dark-100 dark:hover:text-white'
 										}`}
 									>
@@ -118,7 +118,7 @@ export function ListSidebar({ members, selectedMember }: ListSidebarSectionProps
 	const groupItems = groupMembers(members);
 
 	return (
-		<div className="space-y-2">
+		<>
 			{Object.keys(groupItems).map((group, i) => (
 				<ListSidebarSection
 					key={i}
@@ -127,6 +127,6 @@ export function ListSidebar({ members, selectedMember }: ListSidebarSectionProps
 					title={group}
 				/>
 			))}
-		</div>
+		</>
 	);
 }
diff --git a/packages/website/src/components/Section.tsx b/packages/website/src/components/Section.tsx
index 09a9ce94b..e6c6553e1 100644
--- a/packages/website/src/components/Section.tsx
+++ b/packages/website/src/components/Section.tsx
@@ -16,10 +16,11 @@ export function Section({ title, children, className, defaultClosed }: SectionPr
 	return (
 		<div className={className}>
 			<AnimatePresence initial={false}>
-				<h3 className="flex gap-2 whitespace-pre-wrap font-semibold dark:text-white">
-					<div onClick={() => setCollapsed(!collapsed)}>
-						{collapsed ? <VscChevronRight size={20} /> : <VscChevronDown size={20} />}
-					</div>
+				<h3
+					className="flex gap-2 whitespace-pre-wrap font-semibold dark:text-white cursor-pointer"
+					onClick={() => setCollapsed(!collapsed)}
+				>
+					{collapsed ? <VscChevronRight size={20} /> : <VscChevronDown size={20} />}
 					{title}
 				</h3>
 				{collapsed ? null : (
diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx
index 4142a5465..998d60981 100644
--- a/packages/website/src/components/SidebarLayout.tsx
+++ b/packages/website/src/components/SidebarLayout.tsx
@@ -9,12 +9,12 @@ export function SidebarLayout({
 }: PropsWithChildren<Partial<ItemListProps & { data: { member: ReturnType<typeof findMember> } }>>) {
 	return (
 		<div className="flex flex-col lg:flex-row overflow-hidden max-w-full h-full max-h-full bg-white dark:bg-dark">
-			<div className="w-full lg:max-w-[370px] lg:min-w-[370px]">
+			<div className="h-full w-full lg:max-w-[370px] lg:min-w-[370px]">
 				{packageName && data ? (
 					<ItemSidebar packageName={packageName} data={data} selectedMember={data.member?.name} />
 				) : null}
 			</div>
-			<div className="max-h-full grow overflow-auto">{children}</div>
+			<div className="max-h-full grow overflow-x-hidden overflow-y-auto">{children}</div>
 		</div>
 	);
 }