chore: clean up

src/components/ApiInfo/ApiInfo.tsx

@@ -101,11 +101,7 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
                 null}
             </StyledMarkdownBlock>
             <Markdown source={store.spec.info.description} />
-            {externalDocs && (
-              <p>
-                <ExternalDocumentation externalDocs={externalDocs} />
-              </p>
-            )}
+            {externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
           </MiddlePanel>
         </Row>
       </Section>

src/components/ContentItems/ContentItems.tsx

@@ -82,9 +82,7 @@ export class SectionItem extends React.Component<ContentItemProps> {
         {externalDocs && (
           <Row>
             <MiddlePanel>
-              <p>
               <ExternalDocumentation externalDocs={externalDocs} />
-              </p>
             </MiddlePanel>
           </Row>
         )}

src/components/ExternalDocumentation/ExternalDocumentation.tsx

@@ -1,16 +1,18 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import styled from '../../styled-components';
+import styled, { withProps } from '../../styled-components';
 import { OpenAPIExternalDocumentation } from '../../types';
 import { linksCss } from '../Markdown/styled.elements';
 
-const Link = styled.span`
+const LinkWrap = withProps<{ compact?: boolean }>(styled.div)`
   ${linksCss};
+  ${({ compact }) => (!compact ? 'margin: 1em 0' : '')}
 `;
 
 @observer
 export class ExternalDocumentation extends React.Component<{
   externalDocs: OpenAPIExternalDocumentation;
+  compact?: boolean;
 }> {
   render() {
     const { externalDocs } = this.props;
@@ -19,9 +21,9 @@ export class ExternalDocumentation extends React.Component<{
     }
 
     return (
-      <Link>
+      <LinkWrap compact={this.props.compact}>
         <a href={externalDocs.url}>{externalDocs.description || externalDocs.url}</a>
-      </Link>
+      </LinkWrap>
     );
   }
 }

src/components/Fields/FieldDetails.tsx

@@ -55,9 +55,7 @@ export class FieldDetails extends React.PureComponent<FieldProps> {
           <Markdown dense={true} source={description} />
         </div>
         {schema.externalDocs && (
-          <div>
-            <ExternalDocumentation externalDocs={schema.externalDocs} />
-          </div>
+          <ExternalDocumentation externalDocs={schema.externalDocs} compact={true} />
         )}
         {(renderDiscriminatorSwitch && renderDiscriminatorSwitch(this.props)) || null}
       </div>

src/components/Operation/Operation.tsx

@@ -26,7 +26,7 @@ const OperationRow = styled(Row)`
   overflow: hidden;
 `;
 
-const Description = styled(Markdown)`
+const Description = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing.unit * 6}px;
 `;
 
@@ -40,6 +40,8 @@ export class Operation extends React.Component<OperationProps> {
     const { operation } = this.props;
 
     const { name: summary, description, deprecated, externalDocs } = operation;
+    const hasDescription = !!(description || externalDocs);
+
     return (
       <OptionsContext.Consumer>
         {options => (
@@ -50,11 +52,11 @@ export class Operation extends React.Component<OperationProps> {
                 {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
               </H2>
               {options.pathInMiddlePanel && <Endpoint operation={operation} inverted={true} />}
-              {description !== undefined && <Description source={description} />}
-              {externalDocs && (
-                <p>
-                  <ExternalDocumentation externalDocs={externalDocs} />
-                </p>
+              {hasDescription && (
+                <Description>
+                  {description !== undefined && <Markdown source={description} />}
+                  {externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
+                </Description>
               )}
               <SecurityRequirements securities={operation.security} />
               <Parameters parameters={operation.parameters} body={operation.requestBody} />