DOCS-878: Use max-height instead of height

This avoids pushing down the nav buttons / footer when a short page is combined with a short in-page ToC. Also,

- TOC fix for hard load

- Better breaks and min-width to avoid wasting space on sidebar at normal screen sizes

Author: josh-heyer

src/components/table-of-contents.js

@@ -1,24 +1,26 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "./";
 import { useScrollRestoration } from "gatsby";
-import { useLocation } from "@reach/router";
+import { useLocation } from "@gatsbyjs/reach-router";
 
 const TableOfContents = ({ toc, deepToC }) => {
   const scrollRestoration = useScrollRestoration("header-navigation-sidebar");
-  const hash = useLocation().hash;
+  const loc = useLocation();
+  const [hash, setHash] = useState("");
+
+  useEffect(() => {
+    setHash(loc.hash);
+  }, [loc]);
 
   return (
-    <ul
-      className="list-unstyled border-start ps-4 lh-12 toc-sticky pt-3"
-      {...scrollRestoration}
-    >
+    <ul className="list-unstyled lh-12 toc-sticky pt-3" {...scrollRestoration}>
       <li className="mb-2 fw-bold text-muted text-uppercase small">
         On this page
       </li>
       {toc
         .filter((item) => item.title)
         .map((item) => (
-          <li key={item.title}>
+          <li key={item.url || item.title}>
             <Link
               className={`d-block py-2 align-middle  ${
                 hash === item.url ? "active" : deepToC ? "fw-normal" : ""
@@ -32,7 +34,7 @@ const TableOfContents = ({ toc, deepToC }) => {
                 {item.items
                   .filter((subitem) => subitem.title)
                   .map((subitem) => (
-                    <li key={subitem.title}>
+                    <li key={subitem.url || subitem.title}>
                       <Link
                         className={`d-block py-1 align-middle  ${
                           hash === subitem.url ? "active" : "fw-lighter"

src/styles/_docs.scss

@@ -102,7 +102,7 @@ label.link-label {
 }
 
 .content-container {
-  max-width: 1080px;
+  max-width: 1344px;
   margin: 0 auto;
 }
 

src/styles/_overrides.scss

@@ -11,7 +11,7 @@
 .toc-sticky {
   position: sticky;
   top: 0;
-  height: 100vh;
+  max-height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
 }

src/templates/doc.js

@@ -288,7 +288,7 @@ const DocTemplate = ({ data, pageContext }) => {
             </Col>
 
             {showToc && (
-              <Col className="d-xs-none col-lg-3 d-print-none">
+              <Col className="d-none d-lg-block col-lg-3 d-print-none border-start">
                 <TableOfContents toc={newtoc} deepToC={deepToC} />
               </Col>
             )}

src/templates/learn-doc.js

@@ -211,7 +211,7 @@ const LearnDocTemplate = ({ data, pageContext }) => {
             </Col>
 
             {showToc && (
-              <Col className="d-xs-none col-lg-3 d-print-none">
+              <Col className="d-none d-lg-block col-lg-3 d-print-none border-start">
                 <TableOfContents toc={newtoc} deepToC={deepToC} />
               </Col>
             )}