From 3afaf63d7b580582d21c7052784f02e1cb6df0df Mon Sep 17 00:00:00 2001
From: Philip Zeyliger <philip@bold.dev>
Date: Sun, 8 Feb 2026 18:36:20 +0000
Subject: [PATCH] shelley: fix terminal panel padding and dark mode detection

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 <shelley@exe.dev>
---
 ui/src/components/TerminalPanel.tsx | 9 ++++-----
 ui/src/styles.css                   | 1 +
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/TerminalPanel.tsx b/ui/src/components/TerminalPanel.tsx
index a55e3419fff71654fa999c95006ccaea69c83d44..173066b3c2bd0dbed88261682dd489dc427f17bd 100644
--- a/ui/src/components/TerminalPanel.tsx
+++ b/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();
   }, []);
diff --git a/ui/src/styles.css b/ui/src/styles.css
index 3ec3f4470d41dde01d8aa931d5f021191a48ba10..44766ac1adf355954d501d838cc3e91644c19f8b 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -4995,4 +4995,5 @@ kbd {
 .terminal-panel-content > div {
   position: absolute;
   inset: 0;
+  padding: 8px 12px;
 }