fix: Improve rendering of TOC panel

frontend/src/components/TOC/TOC.module.css

@@ -1,16 +1,15 @@
 .toc {
   font-size: 0.8rem;
-  min-width: 25vw;
-  flex: 1 auto;
+  flex: 1 0 25vw;
 
   &.hidden {
-    flex: 0 0;
-    min-width: 0;
+    display: none;
   }
 
+  transition: flex-basis 0.1s ease-in-out;
+
   overflow-y: scroll;
   overflow-x: wrap;
-  height: 100vh;
 
   .tocDivision {
     margin-block: 0.5rem;

frontend/src/components/TOC/TOC.tsx

@@ -55,15 +55,17 @@ function TOC({ toc }: TOCProps) {
   const [isVisible, setIsVisible] = useState(true);
 
   return (
-    <nav className={[styles.toc, isVisible ? "" : styles.hidden].join(" ")}>
+    <>
       <button
         onClick={() => setIsVisible(!isVisible)}
         className={styles.toggleButton}
       >
         {isVisible ? "<" : ">"}
       </button>
+      <nav className={[styles.toc, isVisible ? "" : styles.hidden].join(" ")}>
         {toc.map((division) => renderDivision(division))}
       </nav>
+    </>
   );
 }
 export default TOC;