perf: cleanup

components/graphql/RequestOptions.vue

@@ -55,7 +55,7 @@
               />
             </div>
           </div>
-          <div ref="queryEditor" class="w-full block"></div>
+          <div ref="queryEditor"></div>
         </AppSection>
       </SmartTab>
 
@@ -93,7 +93,7 @@
               />
             </div>
           </div>
-          <div ref="variableEditor" class="w-full block"></div>
+          <div ref="variableEditor"></div>
         </AppSection>
       </SmartTab>
 
@@ -147,7 +147,7 @@
             </div>
           </div>
           <div v-if="bulkMode" class="flex">
-            <div ref="bulkEditor" class="w-full block"></div>
+            <div ref="bulkEditor"></div>
           </div>
           <div v-else>
             <div

components/graphql/Response.vue

@@ -41,7 +41,7 @@
         />
       </div>
     </div>
-    <div v-if="responseString" ref="schemaEditor" class="w-full block"></div>
+    <div v-if="responseString" ref="schemaEditor"></div>
     <div
       v-else
       class="

components/graphql/Sidebar.vue

@@ -172,11 +172,7 @@
               />
             </div>
           </div>
-          <div
+          <div v-if="schemaString" ref="schemaEditor"></div>
-            v-if="schemaString"
-            ref="schemaEditor"
-            class="w-full block"
-          ></div>
           <div
             v-else
             class="

components/http/CodegenModal.vue

@@ -41,7 +41,7 @@
         <div
           v-if="codegenType"
           ref="generatedCode"
-          class="w-full border border-dividerLight rounded block"
+          class="border border-dividerLight rounded"
         ></div>
       </div>
     </template>

components/http/Headers.vue

@@ -48,7 +48,7 @@
       </div>
     </div>
     <div v-if="bulkMode" class="flex">
-      <div ref="bulkEditor" class="w-full block"></div>
+      <div ref="bulkEditor"></div>
     </div>
     <div v-else>
       <div

components/http/ImportCurl.vue

@@ -6,10 +6,7 @@
   >
     <template #body>
       <div class="flex flex-col px-2">
-        <div
+        <div ref="curlEditor" class="border border-dividerLight rounded"></div>
-          ref="curlEditor"
-          class="w-full border border-dividerLight rounded block"
-        ></div>
       </div>
     </template>
     <template #footer>

components/http/Parameters.vue

@@ -48,7 +48,7 @@
       </div>
     </div>
     <div v-if="bulkMode" class="flex">
-      <div ref="bulkEditor" class="w-full block"></div>
+      <div ref="bulkEditor"></div>
     </div>
     <div v-else>
       <div

components/http/PreRequestScript.vue

@@ -41,7 +41,7 @@
     </div>
     <div class="border-b border-dividerLight flex">
       <div class="border-r border-dividerLight w-2/3">
-        <div ref="preRrequestEditor" class="w-full block"></div>
+        <div ref="preRrequestEditor"></div>
       </div>
       <div
         class="

components/http/RawBody.vue

@@ -62,9 +62,7 @@
         />
       </div>
     </div>
-    <div class="relative">
+    <div ref="rawBodyParameters"></div>
-      <div ref="rawBodyParameters" class="w-full block"></div>
-    </div>
   </div>
 </template>
 

components/http/Tests.vue

@@ -41,7 +41,7 @@
     </div>
     <div class="border-b border-dividerLight flex">
       <div class="border-r border-dividerLight w-2/3">
-        <div ref="testScriptEditor" class="w-full block"></div>
+        <div ref="testScriptEditor"></div>
       </div>
       <div
         class="

components/lenses/renderers/HTMLLensRenderer.vue

@@ -52,12 +52,7 @@
         />
       </div>
     </div>
-    <div class="relative">
+    <div v-show="!previewEnabled" ref="htmlResponse"></div>
-      <div
-        v-show="!previewEnabled"
-        ref="htmlResponse"
-        class="w-full block"
-      ></div>
     <iframe
       v-show="previewEnabled"
       ref="previewFrame"
@@ -65,7 +60,6 @@
       src="about:blank"
     ></iframe>
   </div>
-  </div>
 </template>
 
 <script setup lang="ts">

components/lenses/renderers/ImageLensRenderer.vue

@@ -27,13 +27,11 @@
         />
       </div>
     </div>
-    <div class="flex relative">
     <img
       class="border-b border-dividerLight flex max-w-full flex-1"
       :src="imageSource"
     />
   </div>
-  </div>
 </template>
 
 <script>

components/lenses/renderers/JSONLensRenderer.vue

@@ -43,9 +43,7 @@
         />
       </div>
     </div>
-    <div class="relative">
+    <div ref="jsonResponse"></div>
-      <div ref="jsonResponse" class="w-full block"></div>
-    </div>
   </div>
 </template>
 

components/lenses/renderers/RawLensRenderer.vue

@@ -43,9 +43,7 @@
         />
       </div>
     </div>
-    <div class="relative">
+    <div ref="rawResponse"></div>
-      <div ref="rawResponse" class="w-full block"></div>
-    </div>
   </div>
 </template>
 

components/lenses/renderers/XMLLensRenderer.vue

@@ -43,9 +43,7 @@
         />
       </div>
     </div>
-    <div class="relative">
+    <div ref="xmlResponse"></div>
-      <div ref="xmlResponse" class="w-full block"></div>
-    </div>
   </div>
 </template>
 

helpers/editor/codemirror.ts

@@ -2,7 +2,7 @@ import CodeMirror from "codemirror"
 
 import "codemirror-theme-github/theme/github.css"
 import "codemirror/theme/base16-dark.css"
-import "codemirror/theme/3024-night.css"
+import "codemirror/theme/tomorrow-night-bright.css"
 
 import "codemirror/lib/codemirror.css"
 import "codemirror/addon/lint/lint.css"
@@ -168,7 +168,7 @@ export function useCodemirror(
       case "dark":
         return "base16-dark"
       case "black":
-        return "3024-night"
+        return "tomorrow-night-bright"
       default:
         return "default"
     }

pages/graphql.vue

@@ -1,16 +1,11 @@
 <template>
-  <div>
   <Splitpanes
     class="smart-splitter"
     :dbl-click-splitter="false"
     :horizontal="!(windowInnerWidth.x.value >= 768)"
   >
     <Pane class="hide-scrollbar !overflow-auto">
-        <Splitpanes
+      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
-          class="smart-splitter"
-          :dbl-click-splitter="false"
-          horizontal
-        >
         <Pane class="hide-scrollbar !overflow-auto">
           <GraphqlRequest :conn="gqlConn" />
           <GraphqlRequestOptions :conn="gqlConn" />
@@ -30,7 +25,6 @@
       <GraphqlSidebar :conn="gqlConn" />
     </Pane>
   </Splitpanes>
-  </div>
 </template>
 
 <script lang="ts">