Make playground responsive layout

playground/App.tsx

@@ -6,7 +6,6 @@ import {
   AppShell,
   Code,
   Divider,
-  Flex,
   Group,
   Input,
   ScrollArea,
@@ -21,6 +20,7 @@ import '@mantine/core/styles.css';
 import { IconBrandGithub, IconMoon, IconSun } from '@tabler/icons-react';
 import * as graphql from 'graphql';
 import { useState } from "react";
+import classes from './Playground.module.css';
 
 const sampleGqlSchema = `
 type Query {
@@ -69,7 +69,7 @@ function Playground() {
   const [gqlSchemaStr, setGqlSchemaStr] = useState<string>(sampleGqlSchema);
   const [typeName, setTypeName] = useState<string | undefined>('Query');
 
-  return <Flex h="100%">
+  return <div className={classes.playground}>
     <Stack h="100%" flex={1}>
       <Textarea
         flex={1}
@@ -93,11 +93,12 @@ function Playground() {
       ></Textarea>
       <TypeNameSelect gqlSchemaInput={gqlSchemaStr} value={typeName} onChange={setTypeName} />
     </Stack>
-    <Divider orientation="vertical" ml="lg" mr="lg" />
+    <Divider orientation="vertical" ml="lg" mr="lg" className={classes['playground-divider-vertical']} />
+    <Divider orientation="horizontal" mt="lg" mb="lg" className={classes['playground-divider-horizontal']} />
     <ScrollArea flex={1}>
       <Result gqlSchemaInput={gqlSchemaStr} convertedTypeName={typeName} />
     </ScrollArea>
-  </Flex>;
+  </div>;
 }
 
 function Result(props: { gqlSchemaInput: string, convertedTypeName: string | undefined }) {
@@ -145,9 +146,9 @@ export function App() {
     padding="lg"
   >
     <AppShell.Header ps="lg" pe="lg">
-      <Group justify="space-between">
-        <Title order={1} lh="60px" fw="normal">GraphQL to JSON Schema Playground</Title>
-        <Group>
+      <Group justify="space-between" wrap="nowrap">
+        <Title order={1} lh="60px" fw="normal" style={{ fontSize: 'min(calc(6vw - 10px), var(--mantine-h1-font-size))' }}>GraphQL to JSON Schema Playground</Title>
+        <Group wrap="nowrap">
           <ActionIcon
             component="a"
             href="https://github.com/acomagu/graphql-to-json-schema"

playground/Playground.module.css

@@ -0,0 +1,22 @@
+.playground {
+  display: flex;
+  height: 100%;
+}
+
+.playground-divider-horizontal {
+  display: none;
+}
+
+@media (max-width: 30em) {
+  .playground {
+    flex-direction: column;
+  }
+
+  .playground-divider-horizontal {
+    display: block;
+  }
+
+  .playground-divider-vertical {
+    display: none;
+  }
+}

playground/package.json

@@ -9,6 +9,7 @@
     "@acomagu/graphql-to-json-schema": "^0.0.2",
     "@mantine/code-highlight": "^7.7.2",
     "@mantine/core": "^7.7.2",
+    "@mantine/hooks": "^7.8.0",
     "@tabler/icons-react": "^3.2.0",
     "graphql": "^16.8.1",
     "react-dom": "^18.2.0"

playground/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />