diff --git a/src-web/atoms/graphqlSchemaAtom.ts b/src-web/atoms/graphqlSchemaAtom.ts
index b9761c06..256e162f 100644
--- a/src-web/atoms/graphqlSchemaAtom.ts
+++ b/src-web/atoms/graphqlSchemaAtom.ts
@@ -1,5 +1,3 @@
-import type { GraphQLSchema } from 'graphql';
 import { atom } from 'jotai';
 
-export const graphqlSchemaAtom = atom<GraphQLSchema | null>(null);
-export const graphqlDocStateAtom = atom<boolean>(false);
+export const showGraphQLDocExplorerAtom = atom<boolean>(false);
diff --git a/src-web/components/GraphQLDocsExplorer.tsx b/src-web/components/GraphQLDocsExplorer.tsx
index 26dedc6e..92195fb5 100644
--- a/src-web/components/GraphQLDocsExplorer.tsx
+++ b/src-web/components/GraphQLDocsExplorer.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable */
 import { Color } from '@yaakapp-internal/plugins';
 import classNames from 'classnames';
-import type { GraphQLField, GraphQLInputField, GraphQLType } from 'graphql';
+import type { GraphQLField, GraphQLInputField, GraphQLSchema, GraphQLType } from 'graphql';
 import {
   getNamedType,
   isEnumType,
@@ -13,99 +13,88 @@ import {
   isScalarType,
   isUnionType,
 } from 'graphql';
-import { useAtomValue } from 'jotai';
-import { ReactNode, useState } from 'react';
-import { graphqlDocStateAtom, graphqlSchemaAtom } from '../atoms/graphqlSchemaAtom';
+import { CSSProperties, memo, ReactNode, useState } from 'react';
+import { showGraphQLDocExplorerAtom } from '../atoms/graphqlSchemaAtom';
 import { jotaiStore } from '../lib/jotai';
 import { CountBadge } from './core/CountBadge';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
 import { Markdown } from './Markdown';
 
+interface Props {
+  style?: CSSProperties;
+  schema: GraphQLSchema;
+  className?: string;
+}
+
 type ExplorerItem =
   | { kind: 'type'; type: GraphQLType; from: ExplorerItem }
   | { kind: 'field'; type: GraphQLField<any, any>; from: ExplorerItem }
   | { kind: 'input_field'; type: GraphQLInputField; from: ExplorerItem }
   | null;
 
-export function GraphQLDocsExplorer() {
-  const graphqlSchema = useAtomValue(graphqlSchemaAtom);
+export const GraphQLDocsExplorer = memo(function ({ style, schema, className }: Props) {
   const [activeItem, setActiveItem] = useState<ExplorerItem>(null);
 
-  if (!graphqlSchema) {
-    return <div className="p-4">No GraphQL schema available</div>;
-  }
-
-  const qryType = graphqlSchema.getQueryType();
-  const mutType = graphqlSchema.getMutationType();
-  const subType = graphqlSchema.getSubscriptionType();
+  const qryType = schema.getQueryType();
+  const mutType = schema.getMutationType();
+  const subType = schema.getSubscriptionType();
 
   const qryItem: ExplorerItem = qryType ? { kind: 'type', type: qryType, from: null } : null;
   const mutItem: ExplorerItem = mutType ? { kind: 'type', type: mutType, from: null } : null;
   const subItem: ExplorerItem = subType ? { kind: 'type', type: subType, from: null } : null;
-  const allTypes = graphqlSchema.getTypeMap();
+  const allTypes = schema.getTypeMap();
 
   return (
-    <div className="relative w-full">
-      <IconButton
-        icon="x"
-        size="sm"
-        className="!absolute right-2 top-0"
-        title="Close documenation explorer"
-        onClick={() => {
-          jotaiStore.set(graphqlDocStateAtom, false);
-        }}
-      />
-      {activeItem == null ? (
-        <div className="flex flex-col gap-3 overflow-auto h-full">
-          <Heading>Root Types</Heading>
-          <GqlTypeRow
-            name={{ value: 'query', color: 'primary' }}
-            item={qryItem}
-            setItem={setActiveItem}
-            className="!my-0"
-          />
-          <GqlTypeRow
-            name={{ value: 'mutation', color: 'primary' }}
-            item={mutItem}
-            setItem={setActiveItem}
-            className="!my-0"
-          />
-          <GqlTypeRow
-            name={{ value: 'subscription', color: 'primary' }}
-            item={subItem}
-            setItem={setActiveItem}
-            className="!my-0"
-          />
-          <Subheading>
-            All Schema Types <CountBadge count={Object.keys(allTypes).length} />
-          </Subheading>
-          <Markdown>{graphqlSchema.description ?? null}</Markdown>
-          <div className="flex flex-col gap-1">
-            {Object.keys(allTypes).map((typeName) => {
-              const t = allTypes[typeName]!;
-              return (
-                <GqlTypeLink
-                  key={t.name}
-                  color="notice"
-                  item={{ kind: 'type', type: t, from: null }}
-                  setItem={setActiveItem}
-                />
-              );
-            })}
+    <div className={classNames(className, 'py-3 mx-3')} style={style}>
+      <div className="h-full border border-dashed border-border rounded-lg">
+        <GraphQLExplorerHeader item={activeItem} setItem={setActiveItem} />
+        {activeItem == null ? (
+          <div className="flex flex-col gap-3 overflow-y-auto h-full w-full p-3">
+            <Heading>Root Types</Heading>
+            <GqlTypeRow
+              name={{ value: 'query', color: 'primary' }}
+              item={qryItem}
+              setItem={setActiveItem}
+              className="!my-0"
+            />
+            <GqlTypeRow
+              name={{ value: 'mutation', color: 'primary' }}
+              item={mutItem}
+              setItem={setActiveItem}
+              className="!my-0"
+            />
+            <GqlTypeRow
+              name={{ value: 'subscription', color: 'primary' }}
+              item={subItem}
+              setItem={setActiveItem}
+              className="!my-0"
+            />
+            <Subheading count={Object.keys(allTypes).length}>All Schema Types</Subheading>
+            <DocMarkdown>{schema.description ?? null}</DocMarkdown>
+            <div className="flex flex-col gap-1">
+              {Object.keys(allTypes).map((typeName) => {
+                const t = allTypes[typeName]!;
+                return (
+                  <GqlTypeLink
+                    key={t.name}
+                    color="notice"
+                    item={{ kind: 'type', type: t, from: null }}
+                    setItem={setActiveItem}
+                  />
+                );
+              })}
+            </div>
           </div>
-        </div>
-      ) : (
-        <div className="h-full grid grid-rows-[auto_minmax(0,1fr)] gap-y-3">
-          <GraphQLExplorerHeader item={activeItem} setItem={setActiveItem} />
-          <div className="overflow-auto h-full max-h-full">
-            <GqlTypeInfo item={activeItem} setItem={setActiveItem} />
+        ) : (
+          <div className="overflow-y-auto h-full w-full px-3 grid grid-cols-[minmax(0,1fr)]">
+            <GqlTypeInfo item={activeItem} setItem={setActiveItem} schema={schema} />
           </div>
-        </div>
-      )}
+        )}
+      </div>
     </div>
   );
-}
+});
 
 function GraphQLExplorerHeader({
   item,
@@ -114,12 +103,32 @@ function GraphQLExplorerHeader({
   item: ExplorerItem;
   setItem: (t: ExplorerItem) => void;
 }) {
-  if (item == null) return null;
-
   return (
-    <nav className="flex items-center gap-1">
-      <Icon icon="chevron_left" color="secondary" />
-      <GqlTypeLink item={item.from} setItem={setItem} />
+    <nav className="pl-2 pr-1 h-md grid grid-rows-1 grid-cols-[minmax(0,1fr)_auto] items-center gap-2 overflow-x-auto min-w-0 hide-scrollbars">
+      <div className="w-full">
+        {item == null ? (
+          <div className="flex items-center gap-2">
+            <Icon icon="house" color="secondary" />
+            <div className="text-text-subtle whitespace-nowrap _truncate">Schema Documentation</div>
+          </div>
+        ) : (
+          <GqlTypeLink
+            item={item.from}
+            setItem={setItem}
+            className="text-text-subtle !font-sans !text-base"
+            leftSlot={<Icon icon="chevron_left" color="secondary" />}
+          />
+        )}
+      </div>
+      <IconButton
+        icon="x"
+        size="sm"
+        className="text-text-subtle"
+        title="Close documenation explorer"
+        onClick={() => {
+          jotaiStore.set(showGraphQLDocExplorerAtom, false);
+        }}
+      />
     </nav>
   );
 }
@@ -127,11 +136,12 @@ function GraphQLExplorerHeader({
 function GqlTypeInfo({
   item,
   setItem,
+  schema,
 }: {
   item: ExplorerItem | null;
   setItem: (t: ExplorerItem) => void;
+  schema: GraphQLSchema;
 }) {
-  const graphqlSchema = useAtomValue(graphqlSchemaAtom);
   if (item == null) return null;
 
   const name = item.kind === 'type' ? getNamedType(item.type).name : item.type.name;
@@ -140,8 +150,8 @@ function GqlTypeInfo({
 
   const heading = (
     <div className="mb-3">
-      <h1 className="text-2xl font-semibold">{name}</h1>
-      <Markdown className="!text-text-subtle italic">{description || 'No description'}</Markdown>
+      <Heading>{name}</Heading>
+      <DocMarkdown>{description || 'No description'}</DocMarkdown>
     </div>
   );
 
@@ -150,19 +160,21 @@ function GqlTypeInfo({
   } else if (isNonNullType(item.type) || isListType(item.type)) {
     // kinda a hack, but we'll just unwrap there and show the named type
     return (
-      <GqlTypeInfo item={{ ...item, kind: 'type', type: item.type.ofType }} setItem={setItem} />
+      <GqlTypeInfo
+        item={{ ...item, kind: 'type', type: item.type.ofType }}
+        setItem={setItem}
+        schema={schema}
+      />
     );
   } else if (isInterfaceType(item.type)) {
     const fields = item.type.getFields();
-    const possibleTypes = graphqlSchema?.getPossibleTypes(item.type) ?? [];
+    const possibleTypes = schema.getPossibleTypes(item.type) ?? [];
 
     return (
       <div>
         {heading}
 
-        <Subheading>
-          Fields <CountBadge count={Object.keys(fields).length} />
-        </Subheading>
+        <Subheading count={Object.keys(fields).length}>Fields</Subheading>
         {Object.keys(fields).map((fieldName) => {
           const field = fields[fieldName]!;
           const fieldItem: ExplorerItem = { kind: 'field', type: field, from: item };
@@ -180,7 +192,7 @@ function GqlTypeInfo({
         {possibleTypes.length > 0 && (
           <>
             <Subheading>Implemented By</Subheading>
-            {possibleTypes.map((t) => (
+            {possibleTypes.map((t: any) => (
               <GqlTypeRow
                 key={t.name}
                 item={{ kind: 'type', type: t, from: item }}
@@ -208,23 +220,15 @@ function GqlTypeInfo({
     const values = item.type.getValues();
 
     return (
-      <div className="flex flex-col gap-3">
+      <div>
         {heading}
-
-        <div>
-          <Subheading>Type</Subheading>
-          <GqlTypeRow item={{ kind: 'type', type: item.type, from: item }} setItem={setItem} />
-        </div>
-
-        <div>
-          <Subheading>Values</Subheading>
-          {values.map((v) => (
-            <div key={v.name} className="my-4">
-              <span className="text-primary">{v.value}</span>
-              <Markdown className="!text-text-subtle">{v.description ?? null}</Markdown>
-            </div>
-          ))}
-        </div>
+        <Subheading>Values</Subheading>
+        {values.map((v) => (
+          <div key={v.name} className="my-4 font-mono text-editor _truncate">
+            <span className="text-primary">{v.value}</span>
+            <DocMarkdown>{v.description ?? null}</DocMarkdown>
+          </div>
+        ))}
       </div>
     );
   } else if (item.kind === 'field') {
@@ -234,7 +238,11 @@ function GqlTypeInfo({
 
         <div>
           <Subheading>Type</Subheading>
-          <GqlTypeRow item={{ kind: 'type', type: item.type.type, from: item }} setItem={setItem} />
+          <GqlTypeRow
+            className="mt-4"
+            item={{ kind: 'type', type: item.type.type, from: item }}
+            setItem={setItem}
+          />
         </div>
 
         {item.type.args.length > 0 && (
@@ -259,9 +267,7 @@ function GqlTypeInfo({
       <div>
         {heading}
 
-        <Subheading>
-          Fields <CountBadge count={Object.keys(fields).length} />
-        </Subheading>
+        <Subheading count={Object.keys(fields).length}>Fields</Subheading>
         {Object.keys(fields).map((fieldName) => {
           const field = fields[fieldName];
           if (field == null) return null;
@@ -288,9 +294,7 @@ function GqlTypeInfo({
       <div>
         {heading}
 
-        <Subheading>
-          Fields <CountBadge count={Object.keys(fields).length} />
-        </Subheading>
+        <Subheading count={Object.keys(fields).length}>Fields</Subheading>
         {Object.keys(fields).map((fieldName) => {
           const field = fields[fieldName];
           if (field == null) return null;
@@ -331,9 +335,7 @@ function GqlTypeInfo({
           </>
         )}
 
-        <Subheading>
-          Fields <CountBadge count={Object.keys(fields).length} />
-        </Subheading>
+        <Subheading count={Object.keys(fields).length}>Fields</Subheading>
         {Object.keys(fields).map((fieldName) => {
           const field = fields[fieldName];
           if (field == null) return null;
@@ -378,7 +380,7 @@ function GqlTypeRow({
   if (item.kind === 'type') {
     child = (
       <>
-        <div>
+        <div className="font-mono text-editor">
           {name && (
             <span
               className={classNames(
@@ -390,16 +392,16 @@ function GqlTypeRow({
                 name?.color === 'info' && 'text-info',
               )}
             >
-              {name.value}:
+              {name.value}:&nbsp;
             </span>
-          )}{' '}
+          )}
           <GqlTypeLink color="notice" item={item} setItem={setItem} />
         </div>
         {!hideDescription && (
-          <Markdown className="!text-text-subtle">
+          <DocMarkdown>
             {(description === undefined ? getNamedType(item.type).description : description) ??
               null}
-          </Markdown>
+          </DocMarkdown>
         )}
       </>
     );
@@ -411,7 +413,7 @@ function GqlTypeRow({
     };
     child = (
       <div>
-        <div>
+        <div className="font-mono text-editor">
           <GqlTypeLink color="info" item={item} setItem={setItem}>
             {name?.value}
           </GqlTypeLink>
@@ -421,9 +423,10 @@ function GqlTypeRow({
               {item.type.args.map((arg) => (
                 <div
                   key={`${arg.type}::${arg.name}`}
-                  className={classNames(item.type.args.length == 1 ? 'inline' : 'pl-3')}
+                  className={classNames(item.type.args.length == 1 && 'inline-flex')}
                 >
-                  <span className="text-primary">{arg.name}:</span>{' '}
+                  {item.type.args.length > 1 && <>&nbsp;&nbsp;</>}
+                  <span className="text-primary">{arg.name}:</span>&nbsp;
                   <GqlTypeLink
                     color="notice"
                     item={{ kind: 'type', type: arg.type, from: item.from }}
@@ -431,28 +434,30 @@ function GqlTypeRow({
                   />
                 </div>
               ))}
-              <span className="text-text-subtle">)</span>{' '}
+              <span className="text-text-subtle">)</span>
             </>
           )}
           <span className="text-text-subtle">:</span>{' '}
           <GqlTypeLink color="notice" item={returnItem} setItem={setItem} />
         </div>
-        <Markdown className="!text-text-subtle mt-0.5">{item.type.description ?? null}</Markdown>
+        <DocMarkdown className="!text-text-subtle mt-0.5">
+          {item.type.description ?? null}
+        </DocMarkdown>
       </div>
     );
   } else if (item.kind === 'input_field') {
     child = (
       <>
-        <div>
+        <div className="font-mono text-editor">
           {name && <span className="text-primary">{name.value}:</span>}{' '}
           <GqlTypeLink color="notice" item={item} setItem={setItem} />
         </div>
-        <Markdown className="!text-text-subtle">{item.type.description ?? null}</Markdown>
+        <DocMarkdown>{item.type.description ?? null}</DocMarkdown>
       </>
     );
   }
 
-  return <div className={className}>{child}</div>;
+  return <div className={classNames(className, 'w-full min-w-0')}>{child}</div>;
 }
 
 function GqlTypeLink({
@@ -460,37 +465,52 @@ function GqlTypeLink({
   setItem,
   color,
   children,
+  leftSlot,
+  className,
 }: {
   item: ExplorerItem;
   color?: Color;
   setItem: (item: ExplorerItem) => void;
-  children?: string;
+  children?: ReactNode;
+  leftSlot?: ReactNode;
+  className?: string;
 }) {
   if (item?.kind === 'type' && isListType(item.type)) {
     return (
-      <>
+      <span className="font-mono text-editor">
         <span className="text-text-subtle">[</span>
-        <GqlTypeLink item={{ ...item, type: item.type.ofType }} setItem={setItem} color={color}>
-          {children}
-        </GqlTypeLink>
+        <GqlTypeLink
+          item={{ ...item, type: item.type.ofType }}
+          setItem={setItem}
+          color={color}
+          leftSlot={leftSlot}
+          children={children}
+        />
         <span className="text-text-subtle">]</span>
-      </>
+      </span>
     );
   } else if (item?.kind === 'type' && isNonNullType(item.type)) {
     return (
-      <>
-        <GqlTypeLink item={{ ...item, type: item.type.ofType }} setItem={setItem} color={color}>
-          {children}
-        </GqlTypeLink>
+      <span className="font-mono text-editor">
+        <GqlTypeLink
+          item={{ ...item, type: item.type.ofType }}
+          setItem={setItem}
+          color={color}
+          leftSlot={leftSlot}
+          children={children}
+        />
         <span className="text-text-subtle">!</span>
-      </>
+      </span>
     );
   }
 
   return (
     <button
       className={classNames(
-        'hover:underline text-left mr-auto',
+        className,
+        'hover:underline text-left mr-auto gap-2 max-w-full',
+        'inline-flex items-center',
+        'font-mono text-editor _truncate',
         color === 'danger' && 'text-danger',
         color === 'primary' && 'text-primary',
         color === 'success' && 'text-success',
@@ -500,12 +520,13 @@ function GqlTypeLink({
       )}
       onClick={() => setItem(item)}
     >
+      {leftSlot}
       <GqlTypeLabel item={item} children={children} />
     </button>
   );
 }
 
-function GqlTypeLabel({ item, children }: { item: ExplorerItem; children?: string }) {
+function GqlTypeLabel({ item, children }: { item: ExplorerItem; children?: ReactNode }) {
   let inner;
   if (children) {
     inner = children;
@@ -517,13 +538,24 @@ function GqlTypeLabel({ item, children }: { item: ExplorerItem; children?: strin
     inner = getNamedType(item.type.type).name;
   }
 
-  return <>{inner}</>;
+  return <div className="_truncate">{inner}</div>;
 }
 
-function Subheading({ children }: { children: ReactNode }) {
-  return <h2 className="font-bold text-lg mt-6 flex items-center">{children}</h2>;
+function Subheading({ children, count }: { children: ReactNode; count?: number }) {
+  return (
+    <h2 className="font-bold text-lg mt-6 flex items-center">
+      <div className="_truncate min-w-0">{children}</div>
+      {count && <CountBadge count={count} />}
+    </h2>
+  );
 }
 
 function Heading({ children }: { children: ReactNode }) {
-  return <h1 className="font-bold text-2xl flex items-center">{children}</h1>;
+  return <h1 className="font-bold text-2xl _truncate">{children}</h1>;
+}
+
+function DocMarkdown({ children, className }: { children: string | null; className?: string }) {
+  return (
+    <Markdown className={classNames(className, '!text-text-subtle italic')}>{children}</Markdown>
+  );
 }
diff --git a/src-web/components/GraphQLEditor.tsx b/src-web/components/GraphQLEditor.tsx
index 6404c867..48e80d28 100644
--- a/src-web/components/GraphQLEditor.tsx
+++ b/src-web/components/GraphQLEditor.tsx
@@ -3,8 +3,10 @@ import type { HttpRequest } from '@yaakapp-internal/models';
 import { updateSchema } from 'cm6-graphql';
 
 import { formatSdl } from 'format-graphql';
+import { useAtom } from 'jotai';
 import { useEffect, useMemo, useRef } from 'react';
 import { useLocalStorage } from 'react-use';
+import { showGraphQLDocExplorerAtom } from '../atoms/graphqlSchemaAtom';
 import { useIntrospectGraphQL } from '../hooks/useIntrospectGraphQL';
 import { useStateWithDeps } from '../hooks/useStateWithDeps';
 import { showDialog } from '../lib/dialog';
@@ -16,8 +18,6 @@ import { Editor } from './core/Editor/Editor';
 import { FormattedError } from './core/FormattedError';
 import { Icon } from './core/Icon';
 import { Separator } from './core/Separator';
-import { useAtom } from 'jotai';
-import { graphqlDocStateAtom, graphqlSchemaAtom } from '../atoms/graphqlSchemaAtom';
 
 type Props = Pick<EditorProps, 'heightMode' | 'className' | 'forceUpdateKey'> & {
   baseRequest: HttpRequest;
@@ -47,8 +47,7 @@ export function GraphQLEditor({ request, onChange, baseRequest, ...extraEditorPr
 
     return { query: request.body.query ?? '', variables: request.body.variables ?? '' };
   }, [extraEditorProps.forceUpdateKey]);
-  const [, setGraphqlSchemaAtomValue] = useAtom(graphqlSchemaAtom);
-  const [isDocOpen, setGraphqlDocStateAtomValue] = useAtom(graphqlDocStateAtom);
+  const [isDocOpen, setGraphqlDocStateAtomValue] = useAtom(showGraphQLDocExplorerAtom);
 
   const handleChangeQuery = (query: string) => {
     const newBody = { query, variables: currentBody.variables || undefined };
@@ -66,8 +65,7 @@ export function GraphQLEditor({ request, onChange, baseRequest, ...extraEditorPr
   useEffect(() => {
     if (editorViewRef.current == null) return;
     updateSchema(editorViewRef.current, schema ?? undefined);
-    setGraphqlSchemaAtomValue(schema);
-  }, [schema, setGraphqlSchemaAtomValue]);
+  }, [schema]);
 
   const actions = useMemo<EditorProps['actions']>(
     () => [
diff --git a/src-web/components/HttpRequestLayout.tsx b/src-web/components/HttpRequestLayout.tsx
index 8f1a7fe2..0be62d10 100644
--- a/src-web/components/HttpRequestLayout.tsx
+++ b/src-web/components/HttpRequestLayout.tsx
@@ -1,12 +1,15 @@
+import type { HttpRequest } from '@yaakapp-internal/models';
+import classNames from 'classnames';
+import { useAtomValue } from 'jotai';
 import type { CSSProperties } from 'react';
 import React from 'react';
-import type { HttpRequest } from '@yaakapp-internal/models';
+import { showGraphQLDocExplorerAtom } from '../atoms/graphqlSchemaAtom';
+import { useCurrentGraphQLSchema } from '../hooks/useIntrospectGraphQL';
+import type { SlotProps } from './core/SplitLayout';
 import { SplitLayout } from './core/SplitLayout';
 import { GraphQLDocsExplorer } from './GraphQLDocsExplorer';
 import { HttpRequestPane } from './HttpRequestPane';
 import { HttpResponsePane } from './HttpResponsePane';
-import { useAtomValue } from 'jotai';
-import { graphqlDocStateAtom } from '../atoms/graphqlSchemaAtom';
 
 interface Props {
   activeRequest: HttpRequest;
@@ -15,9 +18,10 @@ interface Props {
 
 export function HttpRequestLayout({ activeRequest, style }: Props) {
   const { bodyType } = activeRequest;
-  const isDocOpen = useAtomValue(graphqlDocStateAtom);
+  const showGraphQLDocExplorer = useAtomValue(showGraphQLDocExplorerAtom);
+  const graphQLSchema = useCurrentGraphQLSchema(activeRequest);
 
-  return (
+  const requestResponseSplit = ({ style }: Pick<SlotProps, 'style'>) => (
     <SplitLayout
       name="http_layout"
       className="p-3 gap-1.5"
@@ -29,20 +33,24 @@ export function HttpRequestLayout({ activeRequest, style }: Props) {
           fullHeight={orientation === 'horizontal'}
         />
       )}
-      secondSlot={
-        bodyType === 'graphql' && isDocOpen
-          ? () => (
-              <SplitLayout
-                name="http_response_layout"
-                className="gap-1.5"
-                firstSlot={({ style }) => (
-                  <HttpResponsePane activeRequestId={activeRequest.id} style={style} />
-                )}
-                secondSlot={() => <GraphQLDocsExplorer key={activeRequest.id} />}
-              />
-            )
-          : ({ style }) => <HttpResponsePane activeRequestId={activeRequest.id} style={style} />
-      }
+      secondSlot={({ style }) => (
+        <HttpResponsePane activeRequestId={activeRequest.id} style={style} />
+      )}
     />
   );
+
+  if (bodyType === 'graphql' && showGraphQLDocExplorer && graphQLSchema != null) {
+    return (
+      <SplitLayout
+        name="graphql_layout"
+        defaultRatio={0.25}
+        firstSlot={requestResponseSplit}
+        secondSlot={({ style, orientation }) => (
+          <GraphQLDocsExplorer key={activeRequest.id} schema={graphQLSchema} className={classNames(orientation == 'horizontal' && '!ml-0')} style={style} />
+        )}
+      />
+    );
+  }
+
+  return requestResponseSplit({ style });
 }
diff --git a/src-web/components/core/SplitLayout.tsx b/src-web/components/core/SplitLayout.tsx
index fc854c82..fb7ee2ba 100644
--- a/src-web/components/core/SplitLayout.tsx
+++ b/src-web/components/core/SplitLayout.tsx
@@ -8,7 +8,7 @@ import { useContainerSize } from '../../hooks/useContainerQuery';
 import { clamp } from '../../lib/clamp';
 import { ResizeHandle } from '../ResizeHandle';
 
-interface SlotProps {
+export interface SlotProps {
   orientation: 'horizontal' | 'vertical';
   style: CSSProperties;
 }
@@ -25,9 +25,10 @@ interface Props {
   layout?: 'responsive' | 'vertical' | 'horizontal';
 }
 
-const areaL = { gridArea: 'left' };
-const areaR = { gridArea: 'right' };
-const areaD = { gridArea: 'drag' };
+const baseProperties = { minWidth: 0 };
+const areaL = { ...baseProperties, gridArea: 'left' };
+const areaR = { ...baseProperties, gridArea: 'right' };
+const areaD = { ...baseProperties, gridArea: 'drag' };
 
 const STACK_VERTICAL_WIDTH = 500;
 
@@ -78,7 +79,7 @@ export function SplitLayout({
           `
         : `
             ' ${areaL.gridArea} ${areaD.gridArea} ${areaR.gridArea}' minmax(0,1fr)
-            / ${1 - width}fr   0                ${width}fr           
+            / ${1 - width}fr    0                 ${width}fr           
           `,
     };
   }, [style, vertical, height, minHeightPx, width]);
@@ -144,7 +145,11 @@ export function SplitLayout({
   const containerQueryReady = size.width > 0 || size.height > 0;
 
   return (
-    <div ref={containerRef} style={styles} className={classNames(className, 'grid w-full h-full overflow-hidden')}>
+    <div
+      ref={containerRef}
+      style={styles}
+      className={classNames(className, 'grid w-full h-full overflow-hidden')}
+    >
       {containerQueryReady && (
         <>
           {firstSlot({ style: areaL, orientation: vertical ? 'vertical' : 'horizontal' })}
diff --git a/src-web/hooks/useIntrospectGraphQL.ts b/src-web/hooks/useIntrospectGraphQL.ts
index 4ffa4831..5f33b5c1 100644
--- a/src-web/hooks/useIntrospectGraphQL.ts
+++ b/src-web/hooks/useIntrospectGraphQL.ts
@@ -125,3 +125,8 @@ export function useIntrospectGraphQL(
 
   return { schema, isLoading, error, refetch, clear };
 }
+
+export function useCurrentGraphQLSchema(request: HttpRequest) {
+  const { schema } = useIntrospectGraphQL(request, { disabled: true });
+  return schema;
+}