improve oauth-scope rendering in request section to accomodate large list

Author: mrin9

src/rapidoc.js

@@ -294,8 +294,12 @@ export default class RapiDoc extends LitElement {
       }
       .tooltip-text {
         color: var(--fg2);
+        max-width: 400px;
+        position: absolute;
+        z-index:1;
         background-color: var(--bg2);
         visibility: hidden;
+
         overflow-wrap: break-word;
       }
       .tooltip:hover {
@@ -308,7 +312,6 @@ export default class RapiDoc extends LitElement {
 
       .tooltip:hover .tooltip-text {
         visibility: visible;
-        opacity: 1;
       }
 
       @keyframes spin {

src/templates/security-scheme-template.js

@@ -470,10 +470,11 @@ export function pathSecurityTemplate(pathSecurity) {
                             ${orSecurityItem1.pathScopes !== ''
                               ? html`
                                 <div>
-                                  Required scopes: 
-                                  <ul style="font-family:var(--font-mono); margin-block: 4px; padding-inline:16px">
-                                    ${orSecurityItem1.pathScopes.split(',').map((scope) => html`<li>${scope}</li>`)}
-                                  </ul>
+                                  <b>Required scopes:</b> 
+                                  <br/> 
+                                  <div style="margin-left:8px">  
+                                    ${orSecurityItem1.pathScopes.split(',').map((scope, cnt) => html`${cnt === 0 ? '' : '┃'}<span>${scope}</span>`)}
+                                  </div>  
                                 </div>`
                               : ''
                             }