fix: add toc to mobile views and account for branding on shared view layouts (#2997)

* fix: add toc to mobile views and center the branding

* add padding to bottom of sidebar

* put the mobile branding inline

* finesse the padding

* make spelling of sign-in email less crazy looking

* move mobile sidebar button into header

* adds scene to search and 404 pages

* fix title alignment

* make filter buttons tight

* clean up unused imports

* lint

Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/components/Sidebar/Shared.tsx

@@ -1,5 +1,6 @@
 import { observer } from "mobx-react";
 import * as React from "react";
+import styled from "styled-components";
 import Scrollable from "~/components/Scrollable";
 import useStores from "~/hooks/useStores";
 import { NavigationNode } from "~/types";
@@ -17,7 +18,7 @@ function SharedSidebar({ rootNode, shareId }: Props) {
 
   return (
     <Sidebar>
-      <Scrollable flex>
+      <ScrollContainer flex>
         <Section>
           <DocumentLink
             index={0}
@@ -27,9 +28,13 @@ function SharedSidebar({ rootNode, shareId }: Props) {
             activeDocument={documents.active}
           />
         </Section>
-      </Scrollable>
+      </ScrollContainer>
     </Sidebar>
   );
 }
 
+const ScrollContainer = styled(Scrollable)`
+  padding-bottom: 16px;
+`;
+
 export default observer(SharedSidebar);