Simplify layout of full-width images

app/scenes/Document/components/Document.tsx

@@ -17,6 +17,7 @@ import {
 import { toast } from "sonner";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import useComponentSize from "@shared/editor/components/hooks/useComponentSize";
 import { s } from "@shared/styles";
 import { NavigationNode } from "@shared/types";
 import { ProsemirrorHelper, Heading } from "@shared/utils/ProsemirrorHelper";
@@ -437,8 +438,7 @@ class DocumentScene extends React.Component<Props> {
             }
           }}
         />
-        <Background
-          id="full-width-container"
+        <FullWidthContainer
           key={revision ? revision.id : document.id}
           column
           auto
@@ -564,7 +564,7 @@ class DocumentScene extends React.Component<Props> {
               <ConnectionStatus />
             </Footer>
           )}
-        </Background>
+        </FullWidthContainer>
       </ErrorBoundary>
     );
   }
@@ -622,4 +622,20 @@ const MaxWidth = styled(Flex)<MaxWidthProps>`
   `};
 `;
 
+const FullWidthContainer = (props: React.ComponentProps<typeof Background>) => {
+  const ref = React.useRef(null);
+  const rect = useComponentSize(ref.current);
+
+  return (
+    <Background
+      {...props}
+      ref={ref}
+      style={{
+        "--container-width": `${rect.width}px`,
+        "--container-left": `${rect.left}px`,
+      }}
+    />
+  );
+};
+
 export default withTranslation()(withStores(withRouter(DocumentScene)));