Add extra gutter width on 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 }) => {
+  extraGutterWidth?: number;
+}> = ({
+  value: document,
+  editable = false,
+  editing = false,
+  onEditStart,
+  extraGutterWidth,
+}) => {
   const { elements, visibleElements } = useHadronDocument(document);
   const [autoFocus, setAutoFocus] = useState<{
     id: string;
@@ -147,6 +154,7 @@ const HadronDocument: React.FunctionComponent<{
                     type: el.parent?.currentType === 'Array' ? 'value' : 'key',
                   });
                 }}
+                extraGutterWidth={extraGutterWidth}
               ></HadronElement>
             );
           })}

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

@@ -301,6 +301,10 @@ const elementSpacer = css({
   flex: 'none',
 });
 
+const readOnlySpacer = css({
+  width: spacing[900],
+});
+
 const elementExpand = css({
   width: spacing[3],
   flex: 'none',
@@ -371,13 +375,15 @@ export const calculateShowMoreToggleOffset = ({
   editable,
   level,
   alignWithNestedExpandIcon,
+  extraGutterWidth = 0,
 }: {
   editable: boolean;
   level: number;
   alignWithNestedExpandIcon: boolean;
+  extraGutterWidth: number | undefined;
 }) => {
   // the base padding that we have on all elements rendered in the document
-  const BASE_PADDING_LEFT = spacing[50];
+  const BASE_PADDING_LEFT = spacing[50] + extraGutterWidth;
   const OFFSET_WHEN_EDITABLE = editable
     ? // space taken by element actions
       spacing[300] +
@@ -402,13 +408,15 @@ export const HadronElement: React.FunctionComponent<{
   onEditStart?: (id: string, field: 'key' | 'value' | 'type') => void;
   lineNumberSize: number;
   onAddElement(el: HadronElementType): void;
+  extraGutterWidth?: number;
 }> = ({
   value: element,
   editable,
   editingEnabled,
   onEditStart,
   lineNumberSize,
   onAddElement,
+  extraGutterWidth,
 }) => {
   const darkMode = useDarkMode();
   const autoFocus = useAutoFocusContext();
@@ -457,8 +465,9 @@ export const HadronElement: React.FunctionComponent<{
         editable,
         level,
         alignWithNestedExpandIcon: true,
+        extraGutterWidth,
       }),
-    [editable, level]
+    [editable, level, extraGutterWidth]
   );
 
   const isValid = key.valid && value.valid;
@@ -567,6 +576,9 @@ export const HadronElement: React.FunctionComponent<{
             </div>
           </div>
         )}
+        {typeof extraGutterWidth === 'number' && (
+          <div style={{ width: extraGutterWidth }} />
+        )}
         <div className={elementSpacer} style={{ width: elementSpacerWidth }}>
           {/* spacer for nested documents */}
         </div>

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

@@ -131,7 +131,13 @@ class ReadonlyDocument extends React.Component<
    * @returns {Array} The elements.
    */
   renderElements() {
-    return <DocumentList.Document value={this.props.doc} />;
+    return (
+      <DocumentList.Document
+        value={this.props.doc}
+        // Provide extra whitespace for the expand button
+        extraGutterWidth={spacing[900]}
+      />
+    );
   }
 
   renderActions() {