making sure text wraps or flows, but never cuts off

Author: Shannon Anahata

src/components/inlineTableOfContents/style.module.scss

@@ -5,7 +5,10 @@
 
   border-left: 2px solid var(--gray-6);
   padding-left: 1rem;
+  padding-right: 1rem;
   margin: 1.5rem 0;
+  max-width: 100%;
+  width: 100%;
 }
 
 :global(.dark) {
@@ -22,15 +25,21 @@
   letter-spacing: 0.5px;
   color: var(--title-color);
   margin-bottom: 0.5rem;
+  white-space: normal;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .inline-toc-list {
   list-style-type: none;
   padding-left: 0;
   margin: 0;
+  max-width: 100%;
+  width: 100%;
 
   li {
     margin: 0;
+    max-width: 100%;
   }
 
   a {
@@ -40,6 +49,10 @@
     line-height: 1.8;
     display: block;
     transition: color 0.2s ease;
+    white-space: normal;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
 
     &:hover {
       color: var(--link-hover-color);