Fixed authetication section responsive issues

Author: mrin9

dist/index.html

@@ -71,7 +71,6 @@
   <rapi-doc spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json" 
     layout="row"
     theme="light"
-    show-authentication="false"
     show-info="false"
   >
 </rapi-doc>

dist/index.html.gz

@@ -71,7 +71,6 @@
   <rapi-doc spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json" 
     layout="row"
     theme="light"
-    show-authentication="false"
     show-info="false"
   >
 </rapi-doc>

dist/rapidoc-min.js

@@ -1,6 +1,6 @@
 {
   "name": "rapidoc",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "RapiDoc - Open API spec viewer with built in console",
   "author": "Mrinmoy Majumdar <[email protected]>",
   "repository": {
@@ -18,7 +18,9 @@
     "documentation",
     "Custom Element",
     "Web Component",
-    "rapidoc"
+    "rapidoc",
+    "swagger",
+    "swagger ui"
   ],
   "main": "rapidoc.js",
   "module": "rapidoc.js",

dist/rapidoc-min.js.gz

@@ -13,6 +13,15 @@ export default class SecuritySchemes extends LitElement {
     ${FontStyles}
     ${TableStyles}
     ${InputStyles}
+    <style>
+      .url{
+        display: inline-flex;
+        color: #999;
+        max-width: 220px;
+        overflow-wrap: break-word;
+        word-break: break-all;
+      }
+    </style>
     <div>AUTHENTICATION</div>
     <table style="width:auto" class="m-table">
       <tr>
@@ -34,7 +43,7 @@ export default class SecuritySchemes extends LitElement {
             ${this.schemes[s].type==='apiKey'?html`
               Send <code>'${this.schemes[s].name}'</code> in <code>'${this.schemes[s].in}'</code> with the given value
               <div class="api-key" data-type="${this.schemes[s].type}" data-in="${this.schemes[s].in}" data-name="${this.schemes[s].name}" style="margin:5px 0">
-                <input type="text" name="token" style="width:222px;" placeholder="api-token" >
+                <input type="text" name="token" style="width:202px;" placeholder="api-token" >
                 <button 
                   class="m-btn" 
                   data-action="${this.keyValue?'CLEAR':'SET'}" 
@@ -45,8 +54,8 @@ export default class SecuritySchemes extends LitElement {
             ${this.schemes[s].type==='http' && this.schemes[s].scheme==='basic'?html`
               Send <code>'Authorization'</code> in header which will contains the word  <code>'Basic'</code> followed by a space and a base64-encoded string username:password.
               <div class="api-key " data-type="${this.schemes[s].type}" data-scheme="${this.schemes[s].scheme}" data-in="header" data-name="Authorization" style="margin:15px 0">
-                <input type="text" name="username" style="width:110px;" placeholder="username">
-                <input type="text" name="password" style="width:110px;" placeholder="password">
+                <input type="text" name="username" style="width:100px;" placeholder="username">
+                <input type="text" name="password" style="width:100px;" placeholder="password">
                 <button 
                   class="m-btn" 
                   data-action="${this.keyValue?'CLEAR':'SET'}" 
@@ -57,7 +66,7 @@ export default class SecuritySchemes extends LitElement {
             ${this.schemes[s].type==='http' && this.schemes[s].scheme==='bearer'?html`
               Send <code>'Authorization'</code> in header which will contains the word  <code>'Bearer'</code> ffollowed by a space and a Token String.
               <div class="api-key" data-type="${this.schemes[s].type}" data-scheme="${this.schemes[s].scheme}" data-in="header" data-name="Authorization" style="margin:15px 0">
-                <input type="text" name="token" style="width:222px;" placeholder="api-token">
+                <input type="text" name="token" style="width:202px;" placeholder="api-token">
                 <button 
                   class="m-btn" 
                   data-action="${this.keyValue?'CLEAR':'SET'}" 
@@ -68,12 +77,12 @@ export default class SecuritySchemes extends LitElement {
             ${this.schemes[s].type==='oauth2'?html`
               <div>
               ${Object.keys(this.schemes[s].flows).map(f => html`
-                ${this.schemes[s].flows[f].authorizationUrl?html`<div><b>Auth URL:</b> <code style="color:#999"> ${this.schemes[s].flows[f].authorizationUrl}</code></div>`:``}
-                ${this.schemes[s].flows[f].tokenUrl?html`<div><b>Token URL:</b> <code style="color:#999"> ${this.schemes[s].flows[f].tokenUrl}</code></div>`:``}
-                ${this.schemes[s].flows[f].refreshUrl?html`<div><b>Refresh URL:</b> <code style="color:#999"> ${this.schemes[s].flows[f].refreshUrl}</code></div>`:``}
+                ${this.schemes[s].flows[f].authorizationUrl?html`<div><b>Auth URL:</b> <code class="url"> ${this.schemes[s].flows[f].authorizationUrl}</code></div>`:``}
+                ${this.schemes[s].flows[f].tokenUrl?html`<div><b>Token URL:</b> <code class="url"> ${this.schemes[s].flows[f].tokenUrl}</code></div>`:``}
+                ${this.schemes[s].flows[f].refreshUrl?html`<div><b>Refresh URL:</b> <code class="url"> ${this.schemes[s].flows[f].refreshUrl}</code></div>`:``}
                 <div class="oauth" style="margin:5px 0">
-                  <input type="text" name="client" style="width:110px;" placeholder="client-id">
-                  <input type="text" name="secret" style="width:110px;" placeholder="client-secret">
+                  <input type="text" name="client" style="width:100px;" placeholder="client-id">
+                  <input type="text" name="secret" style="width:100px;" placeholder="client-secret">
                 </div>
               `)}
               </div>