From 6402001a8d9f92554d587864061ad25ea1ab9566 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Remko=20Tron=C3=A7on?= <remko@el-tramo.be>
Date: Sat, 14 May 2022 21:37:14 +0200
Subject: [PATCH] thurtle: Move about text to header

---
 src/web/thurtle/thurtle.tsx | 19 +++++++++++++++----
 tsconfig.json               |  1 +
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/web/thurtle/thurtle.tsx b/src/web/thurtle/thurtle.tsx
index 7d38dc8..5abea7e 100644
--- a/src/web/thurtle/thurtle.tsx
+++ b/src/web/thurtle/thurtle.tsx
@@ -6,6 +6,15 @@ import logo from "../../../doc/logo.svg";
 import thurtleFS from "./thurtle.fs";
 import examples from "./examples";
 
+function About() {
+  return (
+    <>
+      Interactive, Logo-like Turtle graphics language, using Forth (powered by{" "}
+      <a href="https://github.com/remko/waforth">WAForth</a>)
+    </>
+  );
+}
+
 const rootEl = (
   <div class="root">
     <nav class="navbar navbar-light bg-light">
@@ -20,6 +29,10 @@ const rootEl = (
           Thurtle
         </a>
 
+        <span class="navbar-text d-none d-md-block">
+          <About />
+        </span>
+
         <a role="button" data-bs-toggle="modal" data-bs-target="#helpModal">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -38,11 +51,9 @@ const rootEl = (
       </div>
     </nav>
     <div class="main d-flex flex-column p-2">
-      <div class="container mt-2 text-muted">
+      <div class="container mt-2 text-muted d-md-none">
         <p>
-          Interactive, Logo-like Turtle graphics language, using Forth (powered
-          by
-          <a href="https://github.com/remko/waforth">WAForth</a>).
+          <About />
         </p>
       </div>
       <div class="d-flex flex-row flex-grow-1">
diff --git a/tsconfig.json b/tsconfig.json
index c0a0f70..57c890b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,7 @@
     "target": "es2015",
     "jsx": "react",
     "jsxFactory": "jsx.createElement",
+    "jsxFragmentFactory": "jsx.createFragment",
     "typeRoots": ["./src/web/types"],
     "types": ["node"],
     "baseUrl": "./src/web",