Fixes authentication section responsive style

Author: mrin9

dist/rapidoc-min.js

@@ -1,6 +1,6 @@
 {
   "name": "rapidoc",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "RapiDoc - Open API spec viewer with built in console",
   "author": "Mrinmoy Majumdar <[email protected]>",
   "repository": {

dist/rapidoc-min.js.gz

@@ -34,7 +34,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:402px;" placeholder="api-token" >
+                <input type="text" name="token" style="width:222px;" placeholder="api-token" >
                 <button 
                   class="m-btn" 
                   data-action="${this.keyValue?'CLEAR':'SET'}" 
@@ -45,8 +45,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:200px;" placeholder="username">
-                <input type="text" name="password" style="width:200px;" placeholder="password">
+                <input type="text" name="username" style="width:110px;" placeholder="username">
+                <input type="text" name="password" style="width:110px;" placeholder="password">
                 <button 
                   class="m-btn" 
                   data-action="${this.keyValue?'CLEAR':'SET'}" 
@@ -57,7 +57,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:402px;" placeholder="api-token">
+                <input type="text" name="token" style="width:222px;" placeholder="api-token">
                 <button 
                   class="m-btn" 
                   data-action="${this.keyValue?'CLEAR':'SET'}" 
@@ -66,14 +66,14 @@ export default class SecuritySchemes extends LitElement {
               </div>
             `:``}
             ${this.schemes[s].type==='oauth2'?html`
-              <div style="width:500px">
+              <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>`:``}
                 <div class="oauth" style="margin:5px 0">
-                  <input type="text" name="client" style="width:200px;" placeholder="client-id">
-                  <input type="text" name="secret" style="width:200px;" placeholder="client-secret">
+                  <input type="text" name="client" style="width:110px;" placeholder="client-id">
+                  <input type="text" name="secret" style="width:110px;" placeholder="client-secret">
                 </div>
               `)}
               </div>