fix: 100% HTML preview area size (#1938)

packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue

@@ -6,6 +6,7 @@
       :key="`lens-${index}`"
       :label="$t(lens.lensName)"
       :selected="index === 0"
+      class="flex flex-col flex-1"
     >
       <component :is="lens.renderer" :response="response" />
     </SmartTab>
@@ -14,6 +15,7 @@
       id="headers"
       :label="$t('response.headers')"
       :info="`${headerLength}`"
+      class="flex flex-col flex-1"
     >
       <LensesHeadersRenderer :headers="response.headers" />
     </SmartTab>
@@ -26,6 +28,7 @@
           ? true
           : false
       "
+      class="flex flex-col flex-1"
     >
       <HttpTestResult />
     </SmartTab>

packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1">
     <div
       class="
         bg-primary
@@ -172,7 +172,6 @@ const togglePreview = () => {
 <style lang="scss" scoped>
 .covers-response {
   @apply bg-white;
-  @apply min-h-64;
   @apply h-full;
   @apply w-full;
   @apply border;

packages/hoppscotch-app/pages/index.vue

@@ -52,7 +52,7 @@
             </SmartTab>
           </SmartTabs>
         </Pane>
-        <Pane class="hide-scrollbar !overflow-auto">
+        <Pane class="hide-scrollbar !overflow-auto flex flex-col">
           <HttpResponse ref="response" />
         </Pane>
       </Splitpanes>