From c801b87d2aea5e17d35093e2548e1f51f42b1ee3 Mon Sep 17 00:00:00 2001
From: Anna Stasiuk <stasiukanya@gmail.com>
Date: Thu, 3 Sep 2020 14:18:42 +0300
Subject: [PATCH] fix: display response code at the top after adding a line
 break (#1374)

* fix: display response code at the top after adding a line break

* chore: rename component from Strong to Code
---
 src/components/Responses/ResponseTitle.tsx  |  3 ++-
 src/components/Responses/styled.elements.ts | 12 ++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/Responses/ResponseTitle.tsx b/src/components/Responses/ResponseTitle.tsx
index 3058f8d3..74e07a39 100644
--- a/src/components/Responses/ResponseTitle.tsx
+++ b/src/components/Responses/ResponseTitle.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { Code } from './styled.elements';
 import { ShelfIcon } from '../../common-elements';
 import { Markdown } from '../Markdown/Markdown';
 
@@ -31,7 +32,7 @@ export class ResponseTitle extends React.PureComponent<ResponseTitleProps> {
             float={'left'}
           />
         )}
-        <strong>{code} </strong>
+        <Code>{code} </Code>
         <Markdown compact={true} inline={true} source={title} />
       </button>
     );
diff --git a/src/components/Responses/styled.elements.ts b/src/components/Responses/styled.elements.ts
index a7058121..9af937b3 100644
--- a/src/components/Responses/styled.elements.ts
+++ b/src/components/Responses/styled.elements.ts
@@ -16,13 +16,13 @@ export const StyledResponseTitle = styled(ResponseTitle)`
   background-color: #f2f2f2;
   cursor: pointer;
 
-  color: ${props => props.theme.colors.responses[props.type].color};
-  background-color: ${props => props.theme.colors.responses[props.type].backgroundColor};
+  color: ${(props) => props.theme.colors.responses[props.type].color};
+  background-color: ${(props) => props.theme.colors.responses[props.type].backgroundColor};
   &:focus {
     outline: auto;
-    outline-color: ${props => props.theme.colors.responses[props.type].color};
+    outline-color: ${(props) => props.theme.colors.responses[props.type].color};
   }
-  ${props =>
+  ${(props) =>
     (props.empty &&
       `
 cursor: default;
@@ -49,3 +49,7 @@ export const HeadersCaption = styled(UnderlinedHeader.withComponent('caption'))`
   margin-top: 1em;
   caption-side: top;
 `;
+
+export const Code = styled.strong`
+  vertical-align: top;
+`;