fix: Full-width nodes misaligned when ToC is open in full-width document (#9860)

* fix: Full-width nodes misaligned when ToC is open in full-width document

* Remove extra div

---------

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

app/scenes/Document/components/Document.tsx

@@ -457,6 +457,11 @@ class DocumentScene extends React.Component<Props> {
       (isShare
         ? ui.tocVisible !== false
         : !document.isTemplate && ui.tocVisible === true);
+    const tocOffset =
+      tocPos === TOCPosition.Left
+        ? EditorStyleHelper.tocWidth / -2
+        : EditorStyleHelper.tocWidth / 2;
+
     const multiplayerEditor =
       !document.isArchived && !document.isDeleted && !revision && !isShare;
 
@@ -470,6 +475,10 @@ class DocumentScene extends React.Component<Props> {
       : document.titleWithDefault;
     const favicon = hasEmojiInTitle ? emojiToUrl(document.icon!) : undefined;
 
+    const fullWidthTransformOffsetStyle = {
+      ["--full-width-transform-offset"]: `${document.fullWidth && showContents ? tocOffset : 0}px`,
+    } as React.CSSProperties;
+
     return (
       <ErrorBoundary showTitle>
         {this.props.location.pathname !== canonicalUrl && (
@@ -531,7 +540,11 @@ class DocumentScene extends React.Component<Props> {
               onSelectTemplate={this.replaceSelection}
               onSave={this.onSave}
             />
-            <Main fullWidth={document.fullWidth} tocPosition={tocPos}>
+            <Main
+              fullWidth={document.fullWidth}
+              tocPosition={tocPos}
+              style={fullWidthTransformOffsetStyle}
+            >
               <React.Suspense
                 fallback={
                   <EditorContainer

shared/editor/components/Styles.ts

@@ -594,7 +594,7 @@ iframe.embed {
   max-width: 100vw;
   clear: both;
   position: initial;
-  transform: translateX(calc(50% + var(--container-width) * -0.5));
+  transform: translateX(calc(50% + var(--container-width) * -0.5 + var(--full-width-transform-offset)));
 
   img {
     max-width: 100vw;
@@ -607,7 +607,7 @@ iframe.embed {
 .${EditorStyleHelper.tableFullWidth} {
   transform: translateX(calc(50% + ${
     EditorStyleHelper.padding
-  }px + var(--container-width) * -0.5));
+  }px + var(--container-width) * -0.5 + var(--full-width-transform-offset)));
 
   .${EditorStyleHelper.tableScrollable},
   table {