Fixes #456 improved responsive styling on mobile form factor

Author: mrin9

src/styles/endpoint-styles.js

@@ -138,33 +138,33 @@ export default css`
   flex-direction: column;
   border-top:1px solid var(--light-border-color);
 }
-.request,
-.response{
+api-request.view-mode,
+api-response.view-mode {
   flex:1; 
   min-height:100px;
   padding:16px 8px;
   overflow:hidden;
 }
-.request{
+api-request.view-mode {
   border-width:0 0 1px 0;
   border-style:dashed;
 }
 
-.head .request,
-.patch .request,
-.options .request { 
+.head api-request.view-mode,
+.patch api-request.view-mode,
+.options api-request.view-mode { 
   border-color:var(--yellow); 
 }
-.put .request{ 
+.put api-request.view-mode { 
   border-color:var(--orange); 
 }
-.post .request{ 
+.post api-request.view-mode { 
   border-color:var(--green); 
 }
-.get .request{ 
+.get api-request.view-mode{ 
   border-color:var(--blue); 
 }
-.delete .request{ 
+.delete api-request.view-mode{ 
   border-color:var(--red); 
 }
 
@@ -184,13 +184,13 @@ export default css`
   .req-resp-container{
     flex-direction: var(--layout, row);
   }
-  .request{
-    border-width:0 1px 0 0;
+  api-response.view-mode {
     padding:16px;
   }
-  .response{
+  api-request.view-mode {
+    border-width:0 1px 0 0;
     padding:16px;
-  } 
+  }
   .summary{
     padding:8px 16px;
   }

src/templates/callback-template.js

@@ -20,7 +20,9 @@ export default function callbackTemplate(callbacks) {
                     <span style="line-height:20px; vertical-align: baseline;">${pathObj[0]} </span>
                   </div>  
                   <div class='expanded-req-resp-container'>
-                    <api-request  class="request-panel"
+                    <api-request
+                      class = "${this.renderStyle}-mode callback"  
+                      style = "width:100%;"
                       callback = "true"
                       method = "${method[0] || ''}", 
                       path = "${pathObj[0] || ''}" 
@@ -40,6 +42,8 @@ export default function callbackTemplate(callbacks) {
                     > </api-request>
 
                     <api-response
+                      style = "width:100%;"
+                      class = "${this.renderStyle}-mode"
                       callback = "true"
                       .responses="${method[1]?.responses}"
                       render-style="${this.renderStyle}"

src/templates/endpoint-template.js

@@ -89,8 +89,9 @@ function endpointBodyTemplate(path) {
       ${codeSampleTabPanel}
     </div>  
     <div class='req-resp-container'> 
-      <api-request 
-        class="request"  
+      <api-request
+        class = "${this.renderStyle}-mode"
+        style = "width:100%;"
         method = "${path.method}", 
         path = "${path.path}" 
         .parameters = "${path.parameters}"
@@ -113,8 +114,9 @@ function endpointBodyTemplate(path) {
       > 
         ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
       </api-request>
-      <api-response  
-        class="response" 
+      <api-response
+        class = "${this.renderStyle}-mode"
+        style = "width:100%;"
         .responses="${path.responses}"
         active-schema-tab = "${this.defaultSchemaTab}" 
         render-style="${this.renderStyle}" 

src/templates/expanded-endpoint-template.js

@@ -56,7 +56,9 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
     ${pathSecurityTemplate.call(this, path.security)}
     ${codeSampleTabPanel}
     <div class='expanded-req-resp-container'>
-      <api-request  class="request-panel"
+      <api-request
+        class = "${this.renderStyle}-mode"
+        style = "width:100%;"
         method = "${path.method}"
         path = "${path.path}"
         .parameters = "${path.parameters}"
@@ -81,7 +83,8 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
       ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
 
       <api-response
-        class = 'response-panel'
+        class = "${this.renderStyle}-mode"
+        style = "width:100%;"
         .responses = "${path.responses}"
         render-style = "${this.renderStyle}"
         schema-style = "${this.schemaStyle}"