Rich-red: make navigation usable when dev tools is open, and add links to popover/overlay blocks

lib/block.js

@@ -68,7 +68,7 @@ const Container = styled.div`
   width: 400px;
 `;
 
-export const StoryBlocks_for_Overlay_and_Popover_content = () => (
+export const Story_Blocks_for_Overlay_and_Popover_content = () => (
   <>
     <p>The Title component is used for rendering headers in Overlay and Popover components.</p>
     <CodeExample>{`<Title onBack={onBack}>Your Projects</Title>`}</CodeExample>

lib/overlay.js

@@ -124,7 +124,7 @@ export const StoryOverlay = () => {
 
   return (
     <>
-      <p>The Overlay component renders an accessible modal.</p>
+      <p>The Overlay component renders an accessible modal. See <a href="#Story_Blocks_for_Overlay_and_Popover_content">blocks to use with Overlays</a>.</p>
       <CodeExample>
         {code`
           <Overlay open={open} onClose={onClose}>

lib/popover.js

@@ -183,7 +183,7 @@ const WidePopover = styled.div`
 
 export const StoryPopover = () => (
   <>
-    <p>The Popover component renders accessible and nestable popovers.</p>
+    <p>The Popover component renders accessible and nestable popovers. See <a href="#Story_Blocks_for_Overlay_and_Popover_content">blocks to use with Popovers</a>.</p>
     <CodeExample>
       {code`
         <Popover

lib/stories.js

@@ -73,8 +73,9 @@ const Wrapper = styled.div`
 
 const Nav = styled.div`
   position: sticky;
-  top: 10.5rem;
-  height: calc(100% - 10.5rem);
+  top: 5em;
+  height: calc(100vh - 5em);
+  overflow: auto;
   flex: 0 0 15%;
   border-right: 1px solid var(--colors-border);  
   @media (max-width: 1200px){