Size body card as a percentage of container space, with no fixed max

Previously it was fixed to a max of 560px in all cases. This is still
uesd elsewhere (e.g. rule editors) but now in body cards, in modern
desktop versions, we use container queries to size the body to 70% of
the available space (as a max - smaller is fine). This makes it easier
to see more of the important content, without risking very awkward UI
cases by being larger than the space available (especially in the narrow
layout).

Author: pimterry

src/components/editor/base-editor.tsx

@@ -41,20 +41,21 @@ interface SchemaMapping {
     readonly schema?: any;
 }
 
-const MAX_HEIGHT = 560;
+const DEFAULT_MAX_HEIGHT = 560;
 
-const EditorMaxHeightContainer = styled.div`
-    ${(p: { expanded: boolean }) => p.expanded
+const EditorContainer = styled.div<{
+    expanded: boolean;
+}>`
+    ${(p) => p.expanded
         ? `
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
-            height: auto !important;
-        `
-        : `
-            max-height: ${MAX_HEIGHT}px;
+            height: auto;
+        ` : `
+            max-height: ${DEFAULT_MAX_HEIGHT}px;
         `
     }
 `;
@@ -63,6 +64,7 @@ const EditorMaxHeightContainer = styled.div`
 @observer
 export class SelfSizedEditor extends React.Component<
     Omit<EditorProps, 'onContentSizeChange'> & {
+        maxHeight?: string;
         expanded?: boolean,
         uiStore?: UiStore // Injected automatically
     }
@@ -73,7 +75,7 @@ export class SelfSizedEditor extends React.Component<
 
     @action.bound
     onContentSizeChange(contentUpdate: MonacoTypes.editor.IContentSizeChangedEvent) {
-        this.contentHeight = Math.min(contentUpdate.contentHeight, MAX_HEIGHT);
+        this.contentHeight = contentUpdate.contentHeight;
     }
 
     onResize = _.throttle(() => {
@@ -101,10 +103,19 @@ export class SelfSizedEditor extends React.Component<
     @observable contentHeight: number = 0;
 
     render() {
-        return <EditorMaxHeightContainer
+        return <EditorContainer
             ref={this.container}
             expanded={!!this.props.expanded}
-            style={{ 'height': this.contentHeight + 'px' }}
+            style={
+                this.props.expanded
+                ? {}
+                : {
+                    'height': this.contentHeight + 'px',
+                    // Override the CSS default where required (body cards) but carefully because
+                    // we use cqh, which isn't supported in all cases yet.
+                    'maxHeight': this.props.maxHeight
+                }
+            }
             onContextMenu={buildContextMenuCallback(
                 this.props.uiStore!,
                 !!this.props.options?.readOnly,
@@ -117,7 +128,7 @@ export class SelfSizedEditor extends React.Component<
                 ref={this.editor}
                 onContentSizeChange={this.onContentSizeChange}
             />
-        </EditorMaxHeightContainer>
+        </EditorContainer>
     }
 }
 

src/components/editor/content-viewer.tsx

@@ -25,6 +25,7 @@ interface ContentViewerProps {
     children: Buffer | string;
     schema?: SchemaObject;
     expanded: boolean;
+    maxHeight?: string;
     headers?: Headers;
     contentType: ViewableContentType;
     editorNode: portals.HtmlPortalNode<typeof SelfSizedEditor | typeof ContainerSizedEditor>;
@@ -179,6 +180,7 @@ export class ContentViewer extends React.Component<ContentViewerProps> {
                         value={content!}
                         schema={this.props.schema}
                         expanded={this.props.expanded}
+                        maxHeight={this.props.maxHeight}
                     />;
                 }
             } catch (e) {

src/components/view/http/http-body-card.tsx

@@ -127,6 +127,7 @@ export class HttpBodyCard extends React.Component<ExpandableCardProps & {
                         contentType={decodedContentType}
                         schema={apiBodySchema}
                         expanded={!!expanded}
+                        maxHeight='70cqh'
                         cache={message.cache}
                     >
                         { message.body.decodedData }
@@ -181,6 +182,7 @@ export class HttpBodyCard extends React.Component<ExpandableCardProps & {
                             contentType={encodedDataContentType}
                             expanded={!!expanded}
                             cache={message.cache}
+                            maxHeight='70cqh'
                         >
                             { encodedBody }
                         </ContentViewer>

src/components/view/http/http-breakpoint-body-card.tsx

@@ -124,6 +124,7 @@ export class HttpBreakpointBodyCard extends React.Component<ExpandableCardProps
                     value={bodyString}
                     onChange={this.onBodyChange}
                     expanded={!!expanded}
+                    maxHeight='50cqh'
                 />
             </EditorCardContent>
         </CollapsibleCard>;

src/components/view/view-details-pane.tsx

@@ -17,6 +17,8 @@ const PaneScrollOuterContainer = styled.div`
     padding: 0 20px 0 20px;
 
     background-color: ${p => p.theme.containerBackground};
+
+    container-type: size;
 `;
 
 const PaneScrollInnerContainer = styled.div`