fix shift part 2 (#12)

Author: ctate

apps/docs/src/app/globals.css

@@ -212,16 +212,19 @@ button {
 }
 
 .wterm {
-  border: 1px solid #e5e5e5;
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px #e5e5e5;
 }
 
 .wterm:focus-within {
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px #e5e5e5;
 }
 
 .dark .wterm {
-  border-color: #262626;
+  box-shadow: inset 0 0 0 1px #262626;
+}
+
+.dark .wterm:focus-within {
+  box-shadow: inset 0 0 0 1px #262626;
 }
 
 .wterm:not([class*="theme-"]) {
@@ -270,13 +273,11 @@ button {
 
 .wterm.wterm-chat {
   --term-bg: var(--background);
-  border: none;
   border-radius: 0;
   box-shadow: none;
   padding: 12px 16px;
 }
 
-
 .wterm.wterm-chat:focus,
 .wterm.wterm-chat:focus-visible,
 .wterm.wterm-chat:focus-within {

packages/@wterm/dom/src/terminal.css

@@ -23,6 +23,7 @@
   --term-font-family: 'Menlo', 'Consolas', 'DejaVu Sans Mono', 'Courier New', monospace;
   --term-font-size: 14px;
   --term-line-height: 1.2;
+  --term-row-height: 17px;
 
   position: relative;
   background: var(--term-bg);
@@ -51,14 +52,14 @@
 
 .term-row {
   display: block;
-  height: calc(var(--term-font-size) * var(--term-line-height));
+  height: var(--term-row-height);
   contain: content;
 }
 
 .term-block {
   display: inline-block;
   width: 1ch;
-  height: calc(var(--term-font-size) * var(--term-line-height));
+  height: var(--term-row-height);
   vertical-align: top;
   overflow: hidden;
 }

packages/@wterm/dom/src/wterm.ts

@@ -174,18 +174,18 @@ export class WTerm {
   }
 
   private _lockHeight(): void {
-    const gridHeight = this._container.getBoundingClientRect().height;
-    if (gridHeight > 0) {
-      const cs = getComputedStyle(this.element);
-      let extra =
-        (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0);
-      if (cs.boxSizing === "border-box") {
-        extra +=
-          (parseFloat(cs.borderTopWidth) || 0) +
-          (parseFloat(cs.borderBottomWidth) || 0);
-      }
-      this.element.style.maxHeight = `${gridHeight + extra}px`;
+    const cs = getComputedStyle(this.element);
+    const rowHeight =
+      parseFloat(cs.getPropertyValue("--term-row-height")) || 17;
+    const gridHeight = this.rows * rowHeight;
+    let extra =
+      (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0);
+    if (cs.boxSizing === "border-box") {
+      extra +=
+        (parseFloat(cs.borderTopWidth) || 0) +
+        (parseFloat(cs.borderBottomWidth) || 0);
     }
+    this.element.style.height = `${gridHeight + extra}px`;
   }
 
   private _measureCharSize(): { width: number; height: number } | null {

packages/@wterm/react/src/Terminal.tsx

@@ -132,9 +132,7 @@ const Terminal = forwardRef<TerminalHandle, TerminalProps>(function Terminal(
   const classes = ["wterm", themeClass, className].filter(Boolean).join(" ");
 
   const mergedStyle: React.CSSProperties = {
-    ...(autoResize
-      ? undefined
-      : { minHeight: Math.ceil(rows * 14 * 1.2 + 24) }),
+    ...(autoResize ? undefined : { height: rows * 17 + 24 }),
     ...style,
   };