feat: Full width images (#4389)

* feat: Full width images

* lint

* fix: Enable TOC overlaid on full size images

* Vendorize react-medium-image-zoom

* tsc

* fix

* Remove body scroll lock

app/scenes/Document/components/Document.tsx

@@ -481,7 +481,12 @@ class DocumentScene extends React.Component<Props> {
             }
           }}
         />
-        <Background key={revision ? revision.id : document.id} column auto>
+        <Background
+          id="full-width-container"
+          key={revision ? revision.id : document.id}
+          column
+          auto
+        >
           <Route
             path={`${document.url}/move`}
             component={() => (
@@ -562,7 +567,7 @@ class DocumentScene extends React.Component<Props> {
             >
               <Notices document={document} readOnly={readOnly} />
               <React.Suspense fallback={<PlaceholderDocument />}>
-                <Flex auto={!readOnly}>
+                <Flex auto={!readOnly} reverse>
                   {revision ? (
                     <RevisionViewer
                       isDraft={document.isDraft}
@@ -572,12 +577,6 @@ class DocumentScene extends React.Component<Props> {
                     />
                   ) : (
                     <>
-                      {showContents && (
-                        <Contents
-                          headings={this.headings}
-                          isFullWidth={document.fullWidth}
-                        />
-                      )}
                       <Editor
                         id={document.id}
                         key={embedsDisabled ? "disabled" : "enabled"}
@@ -624,6 +623,13 @@ class DocumentScene extends React.Component<Props> {
                           </>
                         )}
                       </Editor>
+
+                      {showContents && (
+                        <Contents
+                          headings={this.headings}
+                          isFullWidth={document.fullWidth}
+                        />
+                      )}
                     </>
                   )}
                 </Flex>