shelley: fix terminal panel padding and dark mode detection

Philip Zeyliger and Shelley created 1 month ago

Add padding (8px/12px) to terminal content so text doesn't touch edges.
Fix dark mode detection to use .dark class on documentElement
(matching the rest of the app) instead of data-theme attribute.

Prompt: fix two things: give padding to the terminal since it goes right up against the edge, and make it respect dark mode/light mode settings
Co-authored-by: Shelley <[e-mail]>

Change summary

ui/src/components/TerminalPanel.tsx | 9 ++++-----
ui/src/styles.css                   | 1 +
2 files changed, 5 insertions(+), 5 deletions(-)

Detailed changes

ui/src/components/TerminalPanel.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState, useCallback } from "react";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { WebLinksAddon } from "@xterm/addon-web-links";
+import { isDarkModeActive } from "../services/theme";
 import "@xterm/xterm/css/xterm.css";
 
 function base64ToUint8Array(base64String: string): Uint8Array {
@@ -225,17 +226,15 @@ export default function TerminalPanel({
   const startHeightRef = useRef(0);
 
   // Detect dark mode
-  const [isDark, setIsDark] = useState(
-    document.documentElement.getAttribute("data-theme") === "dark",
-  );
+  const [isDark, setIsDark] = useState(isDarkModeActive);
 
   useEffect(() => {
     const observer = new MutationObserver(() => {
-      setIsDark(document.documentElement.getAttribute("data-theme") === "dark");
+      setIsDark(isDarkModeActive());
     });
     observer.observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ["data-theme"],
+      attributeFilter: ["class"],
     });
     return () => observer.disconnect();
   }, []);

ui/src/styles.css

@@ -4995,4 +4995,5 @@ kbd {
 .terminal-panel-content > div {
   position: absolute;
   inset: 0;
+  padding: 8px 12px;
 }