style: update recorder api playground styles

apps/recorder/src/controllers/__root.tsx

@@ -26,7 +26,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 function RootComponent() {
   return (
     <>
-      <div className="flex gap-2 p-2 text-lg">
+      {/* <div className="flex gap-2 p-2 text-lg ">
         <Link
           to="/"
           activeProps={{
@@ -43,8 +43,8 @@ function RootComponent() {
         >
           GraphQL
         </Link>
-      </div>
-      <hr />
+      </div> */}
+      {/* <hr /> */}
       <Outlet />
       <TanStackRouterDevtools position="bottom-right" />
     </>

apps/recorder/src/controllers/graphql/index.tsx

@@ -1,10 +1,10 @@
-import { GraphiQLProvider, QueryEditor } from '@graphiql/react';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { createFileRoute } from '@tanstack/react-router';
+import GraphiQL from 'graphiql';
 import { useMemo } from 'react';
 import { useAuth } from 'react-oidc-context';
 import { beforeLoadGuard } from '../../auth/guard';
-import '@graphiql/react/dist/style.css';
+import 'graphiql/graphiql.css';
 
 export const Route = createFileRoute('/graphql/')({
   component: RouteComponent,
@@ -27,11 +27,5 @@ function RouteComponent() {
     [auth]
   );
 
-  return (
-    <GraphiQLProvider fetcher={fetcher}>
-      <div className="graphiql-container h-svh">
-        <QueryEditor />
-      </div>
-    </GraphiQLProvider>
-  );
+  return <GraphiQL fetcher={fetcher} className="h-svh" />;
 }

apps/recorder/src/controllers/index.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/')({
   component: RouteComponent,
-});
+})
 
 function RouteComponent() {
-  return <div>Hello to playground!</div>;
+  return <div>Hello to playground!</div>
 }

apps/recorder/src/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/recorder/src/main.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from './app';
+import './main.css';
 
 const rootEl = document.getElementById('root');
 if (rootEl) {
+  rootEl.classList.add('min-h-svh');
   const root = ReactDOM.createRoot(rootEl);
   root.render(
     <React.StrictMode>