refactor: improve ui consistency

packages/hoppscotch-app/components/graphql/Request.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="sticky top-0 z-10 flex p-4 bg-primary">
+  <div
+    class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
+  >
     <div class="inline-flex flex-1 space-x-2">
       <input
         id="url"

packages/hoppscotch-app/components/graphql/RequestOptions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1 h-full">
     <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
       <SmartTab
         :id="'query'"
@@ -8,7 +8,7 @@
         :indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false"
       >
         <div
-          class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
+          class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
         >
           <label class="font-semibold text-secondaryLight">
             {{ t("request.query") }}
@@ -62,7 +62,7 @@
             />
           </div>
         </div>
-        <div ref="queryEditor"></div>
+        <div ref="queryEditor" class="flex flex-col flex-1"></div>
       </SmartTab>
 
       <SmartTab
@@ -71,7 +71,7 @@
         :indicator="variableString && variableString.length > 0 ? true : false"
       >
         <div
-          class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+          class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
         >
           <label class="font-semibold text-secondaryLight">
             {{ t("request.variables") }}
@@ -105,7 +105,7 @@
             />
           </div>
         </div>
-        <div ref="variableEditor"></div>
+        <div ref="variableEditor" class="flex flex-col flex-1"></div>
       </SmartTab>
 
       <SmartTab
@@ -114,7 +114,7 @@
         :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
       >
         <div
-          class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+          class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
         >
           <label class="font-semibold text-secondaryLight">
             {{ t("tab.headers") }}
@@ -149,7 +149,11 @@
             />
           </div>
         </div>
-        <div v-if="bulkMode" ref="bulkEditor"></div>
+        <div
+          v-if="bulkMode"
+          ref="bulkEditor"
+          class="flex flex-col flex-1"
+        ></div>
         <div v-else>
           <div
             v-for="(header, index) in workingHeaders"

packages/hoppscotch-app/components/graphql/Response.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1 h-full">
     <div
       v-if="responseString === 'loading'"
       class="flex flex-col items-center justify-center p-4"
@@ -7,9 +7,9 @@
       <SmartSpinner class="my-4" />
       <span class="text-secondaryLight">{{ t("state.loading") }}</span>
     </div>
-    <div v-else-if="responseString">
+    <div v-else-if="responseString" class="flex flex-col flex-1">
       <div
-        class="sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight"
+        class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
       >
         <label class="font-semibold text-secondaryLight">
           {{ t("response.title") }}
@@ -38,7 +38,7 @@
           />
         </div>
       </div>
-      <div ref="schemaEditor"></div>
+      <div ref="schemaEditor" class="flex flex-col flex-1"></div>
     </div>
     <div
       v-else

packages/hoppscotch-app/components/graphql/Sidebar.vue

@@ -137,7 +137,7 @@
     <SmartTab :id="'schema'" icon="box" :label="`${t('tab.schema')}`">
       <div
         v-if="schemaString"
-        class="sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight"
+        class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
       >
         <label class="font-semibold text-secondaryLight">
           {{ t("graphql.schema") }}
@@ -173,7 +173,11 @@
           />
         </div>
       </div>
-      <div v-if="schemaString" ref="schemaEditor"></div>
+      <div
+        v-if="schemaString"
+        ref="schemaEditor"
+        class="flex flex-col flex-1"
+      ></div>
       <div
         v-else
         class="flex flex-col items-center justify-center p-4 text-secondaryLight"