From 3f9f2affd371c11fa8e55d52744483e56bc39e02 Mon Sep 17 00:00:00 2001
From: Joeri Exelmans <joeri.exelmans@gmail.com>
Date: Sun, 19 Oct 2025 22:43:58 +0200
Subject: [PATCH] better rendering of dialogs

---
 src/App/About.tsx      | 12 +++++++-----
 src/App/App.css        | 27 +++++++++++++++++----------
 src/App/TextDialog.tsx |  4 ++--
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/App/About.tsx b/src/App/About.tsx
index 9241f53..a3826d4 100644
--- a/src/App/About.tsx
+++ b/src/App/About.tsx
@@ -1,19 +1,21 @@
 import logo from "../../artwork/logo.svg";
 
-export function About() {
-  return <div style={{width: 500, padding: 4}}>
-    <p><img src={logo}/></p>
+export function About(props: {setModal}) {
+  return <div style={{maxWidth: '500px', padding: 4}}>
+    <p><img src={logo} style={{maxWidth:'100%'}}/></p>
 
     <p>StateBuddy is an <a target="_blank" href="https://deemz.org/git/research/statebuddy">open source</a> tool for <a target="_blank" href="https://dl.acm.org/doi/10.1016/0167-6423(87)90035-9">Statechart</a> editing, simulation, (omniscient) debugging and testing.</p>
 
     <p>It was originally created for teaching Statecharts to university students.</p>
 
-    <p>The main novelty is in the way you deal with the visual concrete syntax: You just draw boxes, arrows and text. Connectedness or insideness are continuously figured out by a parser, but they do not influence what you can do with the shapes, which IMO is much more intuitive than editors that try to "help" you. This idea comes from <a target="_blank" href="https://dl.acm.org/doi/10.1145/3417990.3421401">CouchEdit</a>, which was in turn influenced by the very old tool <a target="_blank" href="https://en.wikipedia.org/wiki/I-Logix#History">StateMate</a>.</p>
+    <p>The main novelty is in the way you deal with the visual concrete syntax: You just draw boxes, arrows and text. Connectedness or insideness are continuously figured out by a parser, but they do not influence what you can do with the shapes, which IMO is much more intuitive than editors that try to "help" you. This idea comes from <a target="_blank" href="https://dl.acm.org/doi/10.1145/3417990.3421401">CouchEdit</a>, which was in turn influenced by the very old tool <a target="_blank" href="https://en.wikipedia.org/wiki/I-Logix#History">Statemate</a>.</p>
     
     <p>Unique to StateBuddy is that sides of boxes, and endpoints of arrows can be independently selected for many boxes/arrows simultaneously, making editing even more powerful while remaining highly intuitive to both novice and expert users.</p>
 
-    <p>No commercial use without my written permission.</p>
+    <p>No commercial use without my permission.</p>
 
     <p>Contact: <a href="mailto:joeri.exelmans@gmail.com">joeri.exelmans@gmail.com</a></p>
+
+    <button onClick={() => props.setModal(null)}>OK</button>
     </div>;
 }
diff --git a/src/App/App.css b/src/App/App.css
index e040401..0f2957d 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -59,21 +59,28 @@ button.active {
   color: black;
 }
 
+.modalOuter {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  text-align: center;
+
+  background-color: rgba(200,200,200,0.7);
+ /* backdrop-filter: blur(2px) */
+}
+
 .modalInner {
   position: relative;
-  top: 50%;
-  transform: translateY(-50%);
   text-align: center;
   display: inline-block;
   background-color: white;
+  max-height: 100vh;
+  overflow: auto;
 }
 
-.modalOuter {
-  width: 100%;
-  height: 100%;
-  position:absolute;
-  text-align: center;
-  background-color: rgba(200,200,200,0.7);
-  /* backdrop-filter: blur(2px) */
-}
 
diff --git a/src/App/TextDialog.tsx b/src/App/TextDialog.tsx
index 132aadd..082073f 100644
--- a/src/App/TextDialog.tsx
+++ b/src/App/TextDialog.tsx
@@ -26,9 +26,9 @@ export function TextDialog(props: {setModal: Dispatch<SetStateAction<ReactElemen
     error = e.message;
   }
 
-  return <div onKeyDown={onKeyDown} style={{padding: 4, width: 520}}>
+  return <div onKeyDown={onKeyDown} style={{padding: 4}}>
     Text label:<br/>
-    <textarea autoFocus style={{fontFamily: 'Roboto', width:500, height: 100}} onChange={e=>setText(e.target.value)}>{text}</textarea>
+    <textarea autoFocus style={{fontFamily: 'Roboto', width:'calc(100%-10px)', height: 60}} onChange={e=>setText(e.target.value)}>{text}</textarea>
     <br/>
     <span style={{color: 'var(--error-color)'}}>{error}</span><br/>
     <p><kbd>Enter</kbd> to confirm. <kbd>Esc</kbd> to cancel.