chore: refactor MediaTypesSwitch

src/common-elements/dropdown.ts

@@ -102,7 +102,7 @@ export const SimpleDropdown = StyledDropdown.extend`
   text-transform: none;
   font-size: 0.929em;
 
-  .Dropdown-control  {
+  .Dropdown-control {
     font-size: 1em;
     border: none;
     padding: 0 1.2em 0 0;
@@ -112,6 +112,7 @@ export const SimpleDropdown = StyledDropdown.extend`
       color: ${props => props.theme.colors.main};
       box-shadow: none;
     }
+  }
 `;
 
 export const MimeLabel = styled.span`

src/components/MediaTypeSwitch/MediaTypesSwitch.tsx

@@ -38,14 +38,14 @@ export class MediaTypesSwitch extends React.Component<MediaTypesSwitchProps> {
     });
 
     return (
-      <div>
+      <>
         {this.props.renderDropdown({
           value: options[activeMimeIdx],
           options,
           onChange: this.switchMedia,
         })}
         {this.props.children(content.active)}
-      </div>
+      </>
     );
   }
 }

src/components/RequestSamples/RequestSamples.tsx

@@ -33,7 +33,7 @@ export class RequestSamples extends React.Component<RequestSamplesProps> {
             </TabList>
             {hasBodySample && (
               <TabPanel key="payload">
-                <PayloadSamples content={requestBodyContent!} />
+                <div> <PayloadSamples content={requestBodyContent!} /> </div>
               </TabPanel>
             )}
             {samples.map(sample => (

src/components/ResponseSamples/ResponseSamples.tsx

@@ -35,7 +35,9 @@ export class ResponseSamples extends React.Component<ResponseSamplesProps> {
             </TabList>
             {responses.map(response => (
               <TabPanel key={response.code}>
-                <PayloadSamples content={response.content!} />
+                <div>
+                  <PayloadSamples content={response.content!} />
+                </div>
               </TabPanel>
             ))}
           </Tabs>