Fix Send card header layout by replacing all pill margins with flex gap

Previously we used left/right margins to manage spacing, which doesn't
work well with the new layout that can go in either direction.

In general though, using margins like this isn't very nice. This change
drops the margins on generic pills entirely, putting them in only on the
few spots where they're really required, and simplifying various places
en route.

Author: pimterry

src/components/common/card.tsx

@@ -5,6 +5,35 @@ import { observer } from 'mobx-react';
 import { styled, Theme, ThemeProps, css } from '../../styles';
 import { Icon } from '../../icons';
 
+interface CollapseIconProps extends ThemeProps<Theme> {
+    className?: string;
+    onClick: () => void;
+    collapsed: boolean;
+    headerAlignment: 'left' | 'right';
+}
+
+const CollapseIcon = styled((props: CollapseIconProps) =>
+    <Icon
+        className={props.className}
+        icon={['fas', props.collapsed ? 'chevron-down' : 'chevron-up']}
+        onClick={props.onClick}
+    />
+)`
+    cursor: pointer;
+    user-select: none;
+
+    padding: 4px 10px;
+
+    ${p => p.headerAlignment === 'right'
+        ? 'margin: 0 -10px 0 -3px;'
+        : 'margin: 0 -3px 0 -10px;'
+    }
+
+    &:hover {
+        color: ${p => p.theme.popColor};
+    }
+`;
+
 interface CardProps extends React.HTMLAttributes<HTMLElement> {
     className?: string;
     disabled?: boolean;
@@ -56,6 +85,8 @@ const Card = styled.section.attrs((p: CardProps) => ({
         ${p => p.headerAlignment === 'left' && `
             flex-direction: row-reverse;
         `}
+
+        gap: 8px;
     }
 `;
 
@@ -200,35 +231,6 @@ export class CollapsibleCard extends React.Component<
 
 }
 
-interface CollapseIconProps extends ThemeProps<Theme> {
-    className?: string;
-    onClick: () => void;
-    collapsed: boolean;
-    headerAlignment: 'left' | 'right';
-}
-
-const CollapseIcon = styled((props: CollapseIconProps) =>
-    <Icon
-        className={props.className}
-        icon={['fas', props.collapsed ? 'chevron-down' : 'chevron-up']}
-        onClick={props.onClick}
-    />
-)`
-    cursor: pointer;
-    user-select: none;
-
-    padding: 4px 10px;
-
-    ${p => p.headerAlignment === 'right'
-        ? 'margin: 0 -10px 0 5px;'
-        : 'margin: 0 5px 0 -10px;'
-    }
-
-    &:hover {
-        color: ${p => p.theme.popColor};
-    }
-`;
-
 // Bit of redundancy here, but just because the TS styled plugin
 // gets super confused if you use variables in property names.
 const cardDirectionCss = (direction?: string) =>

src/components/common/pill.tsx

@@ -42,14 +42,6 @@ const pillStyles = css`
     border-radius: 4px;
     padding: 4px 8px;
 
-    margin: 0 8px 0 0;
-    * + & {
-        margin-left: 8px;
-    }
-    & + & {
-        margin-left: 0;
-    }
-
     text-align: center;
     text-transform: none;
     font-weight: bold;
@@ -93,10 +85,6 @@ const Select = styled(Pill.withComponent('select'))`
     font-size: ${p => p.theme.textSize};
     font-family: ${p => p.theme.fontFamily};
 
-    ${Pill} + & {
-        margin-left: 0;
-    }
-
     ${interactiveMouseoverStyles}
 
     * {

src/components/editor/body-card-components.tsx

@@ -49,6 +49,10 @@ export const EditorCardContent = styled.div`
     min-height: 0;
 `;
 
+export const ContainerSizedEditorCardContent = styled(EditorCardContent)`
+    flex-shrink: 1;
+`;
+
 export function getBodyDownloadFilename(url: string, headers: Headers | RawHeaders): string | undefined {
     const contentDisposition = getHeaderValue(headers, 'content-disposition') || "";
     const filenameMatch = / filename="([^"]+)"/.exec(contentDisposition);

src/components/intercept/intercept-option.tsx

@@ -146,7 +146,8 @@ const LoadingOverlay = styled.div`
 
 export const StatusPill = styled(Pill)`
     white-space: normal; /* Useful for layout in tiny screens, e.g. the 'proxy port' badge */
-    && { margin: auto 0 0 0; }
+
+    margin-top: auto;
 `;
 
 function getStatusPill(interceptor: Interceptor) {

src/components/send/send-request-body-card.tsx

@@ -12,7 +12,10 @@ import { EditableContentType, EditableContentTypes } from '../../model/events/co
 import { CollapsibleCardProps } from '../common/card';
 import { SendBodyCardSection } from './send-card-section';
 import { ContainerSizedEditor } from '../editor/base-editor';
-import { EditableBodyCardHeader, EditorCardContent } from '../editor/body-card-components';
+import {
+    EditableBodyCardHeader,
+    ContainerSizedEditorCardContent
+} from '../editor/body-card-components';
 
 export interface SendRequestBodyProps extends CollapsibleCardProps {
     body: Buffer;
@@ -24,10 +27,6 @@ export interface SendRequestBodyProps extends CollapsibleCardProps {
     editorNode: portals.HtmlPortalNode<typeof ContainerSizedEditor>;
 }
 
-export const SendRequestEditorContent = styled(EditorCardContent)`
-    flex-shrink: 1;
-`;
-
 @observer
 export class SendRequestBodyCard extends React.Component<SendRequestBodyProps> {
 
@@ -82,7 +81,7 @@ export class SendRequestBodyCard extends React.Component<SendRequestBodyProps> {
                     onChangeContentType={this.onChangeContentType}
                 />
             </header>
-            <SendRequestEditorContent>
+            <ContainerSizedEditorCardContent>
                 <portals.OutPortal<typeof ContainerSizedEditor>
                     node={editorNode}
 
@@ -91,7 +90,7 @@ export class SendRequestBodyCard extends React.Component<SendRequestBodyProps> {
                     value={bodyString}
                     onChange={this.updateBody}
                 />
-            </SendRequestEditorContent>
+            </ContainerSizedEditorCardContent>
         </SendBodyCardSection>;
     }
 }

src/components/send/sent-response-body.tsx

@@ -16,7 +16,7 @@ import { CollapsibleCardProps } from '../common/card';
 import { LoadingCard } from '../common/loading-card';
 
 import {
-    EditorCardContent,
+    ContainerSizedEditorCardContent,
     ReadonlyBodyCardHeader,
     getBodyDownloadFilename,
     BodyDecodingErrorBanner
@@ -35,10 +35,6 @@ export interface SentResponseBodyProps extends CollapsibleCardProps {
     editorNode: portals.HtmlPortalNode<typeof ContainerSizedEditor>;
 }
 
-export const SentResponseEditorContent = styled(EditorCardContent)`
-    flex-shrink: 1;
-`;
-
 // A selection of content types you might want to try out, to explore your encoded data:
 const ENCODED_DATA_CONTENT_TYPES = ['text', 'raw', 'base64', 'image'] as const;
 
@@ -127,7 +123,7 @@ export class SentResponseBodyCard extends React.Component<{
                         isPaidUser={isPaidUser}
                     />
                 </header>
-                <SentResponseEditorContent>
+                <ContainerSizedEditorCardContent>
                     <ContentViewer
                         contentId={message.id}
                         editorNode={this.props.editorNode}
@@ -138,7 +134,7 @@ export class SentResponseBodyCard extends React.Component<{
                     >
                         {decodedBody}
                     </ContentViewer>
-                </SentResponseEditorContent>
+                </ContainerSizedEditorCardContent>
             </SendBodyCardSection>;
         } else if (!decodedBody && message.body.decodingError) {
             // We have failed to decode the body content! Show the error & raw encoded data instead:
@@ -179,7 +175,7 @@ export class SentResponseBodyCard extends React.Component<{
                     headers={message.rawHeaders}
                 />
                 { encodedBody &&
-                    <SentResponseEditorContent>
+                    <ContainerSizedEditorCardContent>
                         <ContentViewer
                             contentId={message.id}
                             editorNode={this.props.editorNode}
@@ -189,7 +185,7 @@ export class SentResponseBodyCard extends React.Component<{
                         >
                             { encodedBody }
                         </ContentViewer>
-                    </SentResponseEditorContent>
+                    </ContainerSizedEditorCardContent>
                 }
             </SendBodyCardSection>;
         } else {

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

@@ -44,6 +44,14 @@ const SnippetDescriptionContainer = styled.div`
     }
 `;
 
+const SnippetDetailButtons = styled.div`
+    display: flex;
+    align-items: center;
+
+    gap: 10px;
+    margin-bottom: 10px;
+`;
+
 const SnippetEditorContainer = styled.div`
     margin: 0 -20px -20px -20px;
     border-top: solid 1px ${p => p.theme.containerBorder};
@@ -82,13 +90,14 @@ const ExportSnippetEditor = observer((p: {
                     getCodeSnippetFormatName(p.exportOption)
                 }</strong>: { description }
             </p>
-            <p>
+            <SnippetDetailButtons>
                 <DocsLink href={link}>
                     Find out more
-                </DocsLink> <CopyButtonPill content={snippet}>
+                </DocsLink>
+                <CopyButtonPill content={snippet}>
                     {' '}Copy snippet
                 </CopyButtonPill>
-            </p>
+            </SnippetDetailButtons>
         </SnippetDescriptionContainer>
         <SnippetEditorContainer>
             <SelfSizedEditor

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

@@ -139,7 +139,6 @@ const CompressionResultsContainer = styled.div`
 
 const CompressionResultsPill = styled(Pill)`
     flex-shrink: 0;
-    margin: 0;
 `;
 
 const CompressionOptions = observer((p: {

src/components/view/stream-message-rows.tsx

@@ -311,6 +311,7 @@ const EditorRowHeader = styled.div<{ messageDirection: 'left' | 'right' }>`
     display: flex;
     flex-direction: row;
     align-items: center;
+    gap: 8px;
 
     padding: 4px 15px 4px 0;
 
@@ -327,6 +328,8 @@ const EditorRowHeader = styled.div<{ messageDirection: 'left' | 'right' }>`
         flex-grow: 1;
         text-overflow: ellipsis;
         overflow: hidden;
+
+        margin-left: -8px;
     }
 
     > ${IconButton} {