added option to specify response area height

Author: mrin9

docs/api.html

@@ -241,13 +241,14 @@ <h2> Attributes</h2>
             </td>
             <td>model</td>
           </tr>
+
           <tr>
-            <td class="mono bold right">api-list-style</td>
+            <td class="mono bold right">response-area-height</td>
             <td class="gray">
-              <span class='bold dark-gray'>Allowed:<span class='blue'> group-by-tag, group-by-path</span></span> -
-               This controls how the API litings are grouped. this can be changed from the UI too (applied only in view mode)
+              <span class='bold dark-gray'>Allowed:<span class='blue'> valid css height value such as 400px, 50%, 60vh etc</span></span> -
+              Use this value to control the height of response textarea 
             </td>
-            <td>group-by-tag</td>
+            <td>300px</td>
           </tr>
         </table>
 

src/rapidoc.js

@@ -48,6 +48,7 @@ export default class RapiDoc extends LitElement {
       defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },
       schemaExpandLevel: { type: Number, attribute: 'schema-expand-level' },
       schemaDescriptionExpanded: { type: String, attribute: 'schema-description-expanded' },
+      responseAreaHeight: { type: String, attribute: 'response-area-height' },
 
       // API Server
       apiKeyName: { type: String, attribute: 'api-key-name' },
@@ -97,6 +98,10 @@ export default class RapiDoc extends LitElement {
     if (!this.defaultSchemaTab || !'example model'.includes(this.defaultSchemaTab)) { this.defaultSchemaTab = 'model'; }
     if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }
     if (!this.schemaDescriptionExpanded || !'true false'.includes(this.schemaDescriptionExpanded)) { this.schemaDescriptionExpanded = 'false'; }
+    debugger;
+    if (!this.responseAreaHeight) {
+      this.responseAreaHeight = '300px';
+    }
     if (!this.allowTry || !'true false'.includes(this.allowTry)) { this.allowTry = 'true'; }
     if (!this.apiKeyName) { this.apiKeyName = ''; }
     if (!this.apiKeyValue) { this.apiKeyValue = ''; }
@@ -139,10 +144,11 @@ export default class RapiDoc extends LitElement {
           --font-mono:${this.monoFont ? `${this.monoFont}` : 'Monaco, "Andale Mono", "Roboto Mono", Consolas'}; 
           --font-regular:${this.regularFont ? `${this.regularFont}` : 'rapidoc, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'};
 
-          --font-size-mono:13px;
-          --font-size-regular:14px;
-          --font-size-small:12px;
-          --border-radius:2px;
+          --font-size-mono: 13px;
+          --font-size-regular: 14px;
+          --font-size-small: 12px;
+          --border-radius: 2px;
+          --resp-area-height: ${this.responseAreaHeight};
 
           display:flex;
           flex-direction: column;

src/styles/font-styles.js

@@ -24,7 +24,7 @@ export default html`
   .red-text {color: var(--red)}
   .multiline {
     overflow: scroll;
-    max-height: 200px;
+    max-height: var(--resp-area-height, 300px);
     color: var(--fg3);  
   }
   .method-fg.put { color: var(--orange); }