fix: move comma out of code block in SecurityRequirement.tsx (#1924)

src/components/SecurityRequirement/SecurityRequirement.tsx

@@ -6,6 +6,23 @@ import { Link, UnderlinedHeader } from '../../common-elements/';
 import { SecurityRequirementModel } from '../../services/models/SecurityRequirement';
 import { linksCss } from '../Markdown/styled.elements';
 
+const ScopeNameList = styled.ul`
+  display: inline;
+  list-style: none;
+  padding: 0;
+
+  li {
+    display: inherit;
+
+    &:after {
+      content: ',';
+    }
+    &:last-child:after {
+      content: none;
+    }
+  }
+`;
+
 const ScopeName = styled.code`
   font-size: ${props => props.theme.typography.code.fontSize};
   font-family: ${props => props.theme.typography.code.fontFamily};
@@ -14,13 +31,6 @@ const ScopeName = styled.code`
   padding: 0.2em;
   display: inline-block;
   line-height: 1;
-
-  &:after {
-    content: ',';
-  }
-  &:last-child:after {
-    content: none;
-  }
 `;
 
 const SecurityRequirementAndWrap = styled.span`
@@ -72,9 +82,13 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
               <SecurityRequirementAndWrap key={scheme.id}>
                 <Link to={scheme.sectionId}>{scheme.displayName}</Link>
                 {scheme.scopes.length > 0 && ' ('}
+                <ScopeNameList>
                   {scheme.scopes.map(scope => (
-                  <ScopeName key={scope}>{scope}</ScopeName>
+                    <li key={scope}>
+                      <ScopeName>{scope}</ScopeName>
+                    </li>
                   ))}
+                </ScopeNameList>
                 {scheme.scopes.length > 0 && ') '}
               </SecurityRequirementAndWrap>
             );