From c3fc8c72954706ffdb9c3cd66d97e545325592ce Mon Sep 17 00:00:00 2001
From: Yuki Ito <acomagu@gmail.com>
Date: Sat, 13 Apr 2024 16:50:03 +0900
Subject: [PATCH] Make playground responsive layout

---
 playground/App.tsx               | 15 ++++++++-------
 playground/Playground.module.css | 22 ++++++++++++++++++++++
 playground/package-lock.json     |  2 +-
 playground/package.json          |  1 +
 playground/vite-env.d.ts         |  1 +
 5 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 playground/Playground.module.css
 create mode 100644 playground/vite-env.d.ts

diff --git a/playground/App.tsx b/playground/App.tsx
index 8fb82a3..67997c7 100644
--- a/playground/App.tsx
+++ b/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"
diff --git a/playground/Playground.module.css b/playground/Playground.module.css
new file mode 100644
index 0000000..815c22d
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/playground/package-lock.json b/playground/package-lock.json
index e456ef0..f1c98ae 100644
--- a/playground/package-lock.json
+++ b/playground/package-lock.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"
@@ -881,7 +882,6 @@
       "version": "7.8.0",
       "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.8.0.tgz",
       "integrity": "sha512-+70fkgjhVJeJ+nJqnburIM3UAsfvxat1Low9HMPobLbv64FIdB4Nzu5ct3qojNQ58r5sK01tg5UoFIJYslaVrg==",
-      "peer": true,
       "peerDependencies": {
         "react": "^18.2.0"
       }
diff --git a/playground/package.json b/playground/package.json
index 4f4512f..b66f807 100644
--- a/playground/package.json
+++ b/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"
diff --git a/playground/vite-env.d.ts b/playground/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/playground/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />