improve the interactive-editor

Author: hasparus

src/app/conf/2025/components/testimonials/index.tsx

@@ -115,7 +115,8 @@ export function TestimonialAuthor({
           width={128}
           height={128}
           className="size-16 saturate-[.1] dark:opacity-90 xl:size-32"
-          fetchPriority="low"
+          // @ts-expect-error React doesn't know it exists yet, but @types/react do
+          fetchpriority="low"
         />
         <div className="absolute inset-0 z-[1] bg-pri-darker opacity-80 mix-blend-plus-lighter dark:mix-blend-color" />
         <Stripes />

src/components/index-page/how-it-works.tsx

@@ -1,18 +1,18 @@
-import React, { useState } from "react"
 import { graphql } from "graphql"
+import React, { useState } from "react"
 
+import { getVariableToType } from "@/components/interactive-code-block/get-variable-to-type"
 import { QueryEditor } from "@/components/interactive-code-block/query-editor"
 import { ResultViewer } from "@/components/interactive-code-block/result-viewer"
-import { getVariableToType } from "@/components/interactive-code-block/get-variable-to-type"
 import { VariableEditor } from "@/components/interactive-code-block/variable-editor"
 import { CodeBlockLabel } from "@/components/pre/code-block-label"
 
 import { HowItWorksListItem } from "./how-it-works-list-item"
 import { PlayButton } from "./play-button"
 import {
-  projectsSchema as schema,
   INITIAL_QUERY_TEXT,
   INITIAL_RESULTS_TEXT,
+  projectsSchema as schema,
 } from "./schema"
 
 export default function InteractiveEditor() {
@@ -91,7 +91,7 @@ export default function InteractiveEditor() {
         }
         code={
           Object.keys(variableTypes).length > 0 ? (
-            <div className="hasVariables flex flex-col">
+            <div className="flex flex-col">
               {editor}
               <div className="flex flex-col border-neu-200 dark:border-neu-50">
                 <CodeBlockLabel

src/components/index-page/how-it-works/interactive-editor.tsx

@@ -96,7 +96,7 @@ export default class MiniGraphiQL extends Component<
     return (
       <div className="[&:not(:first-child)]:_mt-6 grid grid-cols-2 border border-neu-200 text-sm dark:border-neu-50">
         {Object.keys(this.state.variableToType).length > 0 ? (
-          <div className="hasVariables flex flex-col">
+          <div className="flex flex-col">
             {editor}
             <div className="flex flex-col border-neu-200 dark:border-neu-50">
               <CodeBlockLabel

src/components/interactive-code-block/mini-graphiQL.tsx

@@ -63,6 +63,7 @@
   background: var(--cm-background);
   color: var(--cm-foreground);
   position: relative;
+  max-height: 184px;
 
   & .cm-content {
     padding: 16px 0;
@@ -75,6 +76,7 @@
   & .cm-scroller {
     line-height: 1.5;
     font-family: var(--font-mono);
+    overflow: auto;
     -webkit-font-smoothing: auto;
   }
 }