Do more styling work for sidebar

content/blog/angular-templates-start-to-source/index.md

@@ -1617,8 +1617,8 @@ Of course, this means that you can send any value as the context. Change the cod
 ```typescript
 {
     $implicit: pigLatinVal,
-original: this.makePiglatin,
-makePiglatinCasing: 'See? Any value'
+    original: this.makePiglatin,
+    makePiglatinCasing: 'See? Any value'
 }
 ```
 

src/components/blog-post-layout/blog-post-layout.module.scss

@@ -3,16 +3,34 @@
 .blog-post-layout-container {
 	display: flex;
 	flex-wrap: nowrap;
+	max-width: 1500px;
+	margin: 0 auto;
 }
 
-.left-and-right-container {
+.center-container {
+	margin: 0 auto;
+}
+
+.left-container {
+	top: 3rem;
+	overflow: auto;
+	height: calc(100vh - 10rem);
+	margin-top: 4rem;
+	margin-right: 2rem;
+	min-width: 220px;
+}
+
+.right-container {
+	margin-left: 2rem;
+}
+
+.left-container,
+.right-container {
 	width: 1px;
 	flex-grow: 1;
-	top: 13rem;
 	position: sticky;
 	align-self: flex-start;
 	overflow: auto;
-	height: calc(100vh - 13rem);
 
 	// Add 400px to the parent of the blog post, if it matches this, we want to hide the side elements from the browser
 	// This means no left and right containers on mobile

src/components/blog-post-layout/blog-post-layout.tsx

@@ -13,9 +13,9 @@ export const BlogPostLayout = ({
 }: LayoutProps) => {
 	return (
 		<div className={layoutStyles.blogPostLayoutContainer}>
-			<div className={layoutStyles.leftAndRightContainer}>{left}</div>
-			{center}
-			<div className={layoutStyles.leftAndRightContainer}>{right}</div>
+			<div className={layoutStyles.leftContainer}>{left}</div>
+			<div className={layoutStyles.centerContainer}>{center}</div>
+			<div className={layoutStyles.rightContainer}>{right}</div>
 		</div>
 	);
 };

src/components/table-of-contents/use-heading-intersection-observer.ts

@@ -15,8 +15,8 @@ export const useHeadingIntersectionObserver = ({
 }: useHeadingIntersectionObserverProp) => {
 	const [previousSection, setPreviousSelection] = React.useState("");
 
-	const handleObserver = React.useMemo<IntersectionObserverCallback>(() => {
-		return entries => {
+	React.useEffect(() => {
+		const handleObserver: IntersectionObserverCallback = entries => {
 			const highlightFirstActive = () => {
 				if (!tocListRef.current) return;
 				let firstVisibleLink = tocListRef.current.querySelector(
@@ -56,9 +56,7 @@ export const useHeadingIntersectionObserver = ({
 				highlightFirstActive();
 			});
 		};
-	}, [linkRefs, previousSection, tocListRef]);
 
-	React.useEffect(() => {
 		const observer = new IntersectionObserver(handleObserver, {
 			rootMargin: "0px",
 			threshold: 1
@@ -75,5 +73,5 @@ export const useHeadingIntersectionObserver = ({
 			});
 
 		return () => observer.disconnect();
-	}, [linkRefs, handleObserver, headingsToDisplay]);
+	}, [headingsToDisplay, previousSection, linkRefs, tocListRef]);
 };

src/templates/blog-post.tsx

@@ -68,7 +68,7 @@ const BlogPostTemplateChild = (props: BlogPostTemplateProps) => {
 				<BlogPostLayout
 					left={<TableOfContents headingsWithId={post.fields.headingsWithId} />}
 					center={
-						<div>
+						<>
 							<header role="banner" className="marginZeroAutoChild">
 								<PostTitleHeader post={post} />
 								<PostMetadata post={post} />
@@ -78,7 +78,7 @@ const BlogPostTemplateChild = (props: BlogPostTemplateProps) => {
 								data-testid={"post-body-div"}
 								dangerouslySetInnerHTML={{ __html: post.html }}
 							/>
-						</div>
+						</>
 					}
 				/>
 				<footer role="contentinfo" className="post-lower-area">