From 722ec20bad64d8c69b173c163011d37ad0b55591 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 6 Jan 2022 19:27:45 +0100
Subject: chore: move Main grid to its children

This way I can use full width background for some blocks.
---
 src/components/ToC/ToC.module.scss | 11 +++++++++++
 src/components/ToC/ToC.tsx         |  7 ++++---
 2 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ToC/ToC.module.scss

(limited to 'src/components/ToC')

diff --git a/src/components/ToC/ToC.module.scss b/src/components/ToC/ToC.module.scss
new file mode 100644
index 0000000..27e79ad
--- /dev/null
+++ b/src/components/ToC/ToC.module.scss
@@ -0,0 +1,11 @@
+.wrapper {
+  max-height: 100vh;
+  padding-bottom: var(--spacing-sm);
+  position: sticky;
+  top: 0;
+  overflow-y: auto;
+}
+
+.list {
+  margin-bottom: 0;
+}
diff --git a/src/components/ToC/ToC.tsx b/src/components/ToC/ToC.tsx
index e7aafa5..3ab482c 100644
--- a/src/components/ToC/ToC.tsx
+++ b/src/components/ToC/ToC.tsx
@@ -2,6 +2,7 @@ import { t } from '@lingui/macro';
 import { Heading } from '@ts/types/app';
 import { slugify } from '@utils/helpers/slugify';
 import useHeadingsTree from '@utils/hooks/useHeadingsTree';
+import styles from './ToC.module.scss';
 
 const ToC = () => {
   const headingsTree = useHeadingsTree('article');
@@ -21,10 +22,10 @@ const ToC = () => {
   };
 
   return (
-    <>
+    <div className={styles.wrapper}>
       <h2>{title}</h2>
-      <ol>{getItems(headingsTree)}</ol>
-    </>
+      <ol className={styles.list}>{getItems(headingsTree)}</ol>
+    </div>
   );
 };
 
-- 
cgit v1.2.3