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
Redocly · Sep 3, 2020 · c801b87 · c801b87
1 parent 4e7c722
commit c801b87
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git 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
@@ -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;
+`;