Pass extraPaddingLeft through Document for ReadonlyDocument

Author: kraenhansen

packages/compass-components/src/components/document-list/document.tsx

@@ -85,7 +85,14 @@ const HadronDocument: React.FunctionComponent<{
   editable?: boolean;
   editing?: boolean;
   onEditStart?: () => void;
-}> = ({ value: document, editable = false, editing = false, onEditStart }) => {
+  extraPaddingLeft?: number;
+}> = ({
+  value: document,
+  editable = false,
+  editing = false,
+  onEditStart,
+  extraPaddingLeft,
+}) => {
   const { elements, visibleElements } = useHadronDocument(document);
   const [autoFocus, setAutoFocus] = useState<{
     id: string;
@@ -132,6 +139,7 @@ const HadronDocument: React.FunctionComponent<{
                 value={el}
                 editable={editable}
                 editingEnabled={editing}
+                extraPaddingLeft={extraPaddingLeft}
                 onEditStart={
                   editable
                     ? (id, type) => {

packages/compass-crud/src/components/readonly-document.tsx

@@ -131,7 +131,12 @@ class ReadonlyDocument extends React.Component<
    * @returns {Array} The elements.
    */
   renderElements() {
-    return <DocumentList.Document value={this.props.doc} />;
+    return (
+      <DocumentList.Document
+        value={this.props.doc}
+        extraPaddingLeft={spacing[500]}
+      />
+    );
   }
 
   renderActions() {