...

src/App/AST.css

@@ -26,6 +26,7 @@ details {
   padding-left: 2px;
   padding-right: 2px;
   background-color: rgb(230, 249, 255);
+  display: inline-block;
 }
 
 .activeState {
@@ -36,6 +37,7 @@ details {
   margin-left: 4px;
   padding-left: 2px;
   padding-right: 2px;
+  display: inline-block;
 }
 
 hr {

src/App/App.css

@@ -86,5 +86,3 @@ button.active {
   max-height: 100vh;
   overflow: auto;
 }
-
-

src/App/App.tsx

@@ -192,8 +192,9 @@ export function App() {
           borderLeft: 1,
           borderColor: "divider",
           flex: '0 0 content',
-          overflow: "auto",
+          overflowY: "auto",
-          maxWidth: '30vw',
+          overflowX: "visible",
+          maxWidth: 'min(300px, 30vw)',
         }}>
           <ShowAST {...{...ast, rt: rt.at(rtIdx!), highlightActive}}/>
           <ShowOutputEvents outputEvents={ast.outputEvents}/>

src/App/TopPanel.tsx

@@ -199,17 +199,17 @@ export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, on
     onTimeScaleChange((timescale*2).toString(), Math.round(performance.now()));
   }
 
-  return <>
+  return <div className="toolbar">
-    <div className="toolbar">
+
     {/* shortcuts / about */}
     <div className="toolbarGroup">
       <KeyInfo keyInfo={<kbd>~</kbd>}>
         <button title="show/hide keyboard shortcuts" className={showKeys?"active":""} onClick={() => setShowKeys(s => !s)}><KeyboardIcon fontSize="small"/></button>
       </KeyInfo>
       <button title="about StateBuddy" onClick={() => setModal(<About setModal={setModal}/>)}><InfoOutlineIcon fontSize="small"/></button>
+      &emsp;
     </div>
 
-      &emsp;
 
     {/* undo / redo */}
     <div className="toolbarGroup">
@@ -219,9 +219,8 @@ export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, on
       <KeyInfo keyInfo={<><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd></>}>
         <button title="redo"><RedoIcon fontSize="small"/></button>
       </KeyInfo>
-      </div>
-
       &emsp;
+    </div>
 
     {/* insert rountangle / arrow / ... */}
     <div className="toolbarGroup">
@@ -241,9 +240,8 @@ export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, on
           className={mode===m ? "active":""}
           onClick={() => setMode(m)}
         >{buttonTxt}</button></KeyInfo>)}
-      </div>
-
       &emsp;
+    </div>
 
     {/* execution */}
     <div className="toolbarGroup">
@@ -261,9 +259,8 @@ export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, on
           <button title="pause the simulation" disabled={!rt || time.kind==="paused"} className={(rt && time.kind==="paused") ? "active":""} onClick={() => onChangePaused(true, Math.round(performance.now()))}><PauseIcon fontSize="small"/></button>
           <button title="run the simulation in real time" disabled={!rt || time.kind==="realtime"} className={(rt && time.kind==="realtime") ? "active":""} onClick={() => onChangePaused(false, Math.round(performance.now()))}><PlayArrowIcon fontSize="small"/></button>
         </KeyInfo>
-        </div>
-
         &emsp;
+      </div>
 
       {/* speed */}
       <div className="toolbarGroup">
@@ -275,35 +272,33 @@ export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, on
         <KeyInfo keyInfo={<kbd>F</kbd>}>
           <button title="faster" onClick={onFaster}>×2</button>
         </KeyInfo>
-        </div>
-
         &emsp;
+      </div>
 
       {/* time, next */}
       <div className="toolbarGroup">
         <div className="toolbarGroup">
           <label htmlFor="time">time (s)</label>&nbsp;
           <input title="the current simulated time" id="time" disabled={!rt} value={displayTime} readOnly={true} className="readonlyTextBox" />
-            &emsp;
         </div>
+        &emsp;
         <div className="toolbarGroup">
           <label htmlFor="next-timeout">next (s)</label>&nbsp;
           <input title="next point in simulated time where a timed transition may fire" id="next-timeout" disabled={!rt} value={nextTimedTransition ? formatTime(nextTimedTransition[0]) : '+inf'} readOnly={true} className="readonlyTextBox"/>
           <KeyInfo keyInfo={<kbd>Tab</kbd>}>
             <button title="advance time just enough for the next timer to elapse" disabled={nextTimedTransition===undefined} onClick={onSkip}><SkipNextIcon fontSize="small"/><AccessAlarmIcon fontSize="small"/></button>
           </KeyInfo>
+          &emsp;
+        </div>
       </div>
     </div>
 
-
+    {/* input events */}
-      </div>
-
     <div className="toolbarGroup">
-
       {ast.inputEvents &&
         <>
           {ast.inputEvents.map(({event, paramName}) =>
-        <><button title={`raise input event '${event}'`} disabled={!rt} onClick={() => {
+          <div className="toolbarGroup"><button title={`raise input event '${event}'`} disabled={!rt} onClick={() => {
             // @ts-ignore
             const param = document.getElementById(`input-${event}-param`)?.value;
             let paramParsed;
@@ -322,11 +317,10 @@ export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, on
             {event}
           </button>
           {paramName && <><input id={`input-${event}-param`} style={{width: 20}} placeholder={paramName}/></>}
-        &nbsp;</>)}
+          &nbsp;</div>)}
         </>
       }
+    </div>
 
-    </div>
+  </div>;
-  </div>
-  </>;
 }