Ensure that the bottom grid cell actually contains the keyboard.

Also allow the size of the LW paper to grow slightly as input arrives,
and then provide a scrollbar.

tx2-web/src/Keyboard.tsx

@@ -1,5 +1,5 @@
-import { create_html_canvas_2d_painter, draw_keyboard } from '../build/tx2_web'
-import React, { useEffect, useRef, useState } from 'react'
+import { create_html_canvas_2d_painter, draw_keyboard } from '../build/tx2_web';
+import React, { useEffect, useRef, useState } from 'react';
 import { Tx2Controller } from 'controller/tx2';
 
 type Coordinates = {
@@ -65,6 +65,7 @@ interface KeyboardProps {
   tx2Controller: Tx2Controller,
   className?: string | undefined,
   hdClass?: string | undefined,
+  keysClass?: string | undefined,
   unit: number,
 }
 
@@ -112,9 +113,9 @@ const Keyboard = (props: KeyboardProps) => {
   // We draw two canvases; the first is visible and shows the actual
   // keyboard keys.  The second is invisible but the same size, and is
   // used for mouse pointer hit detection.
-  return (<div>
+  return (<div className={props.className}>
     <Canvas
-      className={props.className}
+      className={props.keysClass}
       draw={draw_vis}
       click={click_keyboard}
       width={w}

tx2-web/src/LincolnWriter.tsx

@@ -30,6 +30,7 @@ export class LincolnWriter extends React.Component<LincolnWriterProps, LincolnWr
       <Keyboard
         tx2Controller={this.props.tx2Controller}
         className={styles['lw__input__keyboard']}
+        keysClass={styles['lw__input__keyboard_keys']}
         hdClass={styles['lw__input__keyboard_hits']}
         unit={this.props.inputUnit}
       />

tx2-web/src/MainGrid.tsx

@@ -121,7 +121,7 @@ export const MainGrid = (props: MainGridProps) => (
           </details>
         </div>
       </Box>
-      <Box column="1" row="4" className={styles['lw__container']}>
+      <Box column="1" row="4" className={styles['lw__box']}>
         <LincolnWriter
           inputUnit={0o65}
           outputUnit={0o66}

tx2-web/src/styles.scss

@@ -50,21 +50,19 @@
     text-align: right;
 }
 
-.lw {
+.lw__box {
     border: 0px;
 }
 
-.lw__container {
+.lw {
+    overflow: clip;
     border: 0px;
 }
 
 .lw__input__keyboard {
-    position: absolute;
     border: 1px solid black;
     width: 800px;
     aspect-ratio: 23.8 / 14.5;
-    font: "12px sans-serif";
-    z-index: 0;
 
     &_hits {
         @extend .lw__input__keyboard;
@@ -73,6 +71,12 @@
         /* Put the hit detector canvas in front of the keyboard picture */
         z-index: 1;
     }
+    &_keys {
+        @extend .lw__input__keyboard;
+        font: "12px sans-serif";
+        /* Put the keyboard picture canvas behind the hit detector canvas */
+        z-index: 0;
+    }
 }
 
 
@@ -92,20 +96,21 @@
 
     font-family: monospace;
     background-color: rgb(255, 255, 240);
+
+    min-height: 16ex;
 }
 
 .lw__output_container {
     border: 0px;
     border-style: none;
     margin: 0px 0px;
 
+    max-height: 30ex;
     overflow: auto;
-    height: 16ex;
 }
 
 .lw__output {
     font-family: monospace;
-    height: 4ex;
 }
 
 .lw__cursor  {

tx2-web/src/styles.scss.d.ts

@@ -11,11 +11,12 @@ declare namespace StylesScssNamespace {
     instructions: string;
     "io-panel": string;
     lw: string;
-    lw__container: string;
+    lw__box: string;
     lw__cursor: string;
     "lw__cursor-animation": string;
     lw__input__keyboard: string;
     lw__input__keyboard_hits: string;
+    lw__input__keyboard_keys: string;
     lw__output: string;
     lw__output_container: string;
     lw__paper: string;