From f191119a28afb7d6744976f75d7401a02b0536ef Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 21 Jun 2026 09:54:40 +0000
Subject: [PATCH] Add breathing room around terminal pane borders and content

Wider gap between panes in split view (borders were crowding each other
in 4-up grid), more inset between the pane border and the connect/
disconnect header, and a small horizontal gutter around the xterm mount
so the prompt text doesn't sit flush against the border.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019hu9pZvJY4BgmcQeAw2ugk
---
 src/pages/Terminal.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/Terminal.tsx b/src/pages/Terminal.tsx
index 408f663..7279d20 100644
--- a/src/pages/Terminal.tsx
+++ b/src/pages/Terminal.tsx
@@ -180,7 +180,7 @@ export default function Terminal() {
           </div>
         )}
 
-        <div className={`grid min-h-0 flex-1 gap-2 ${paneGridClass}`}>
+        <div className={`grid min-h-0 flex-1 gap-3 ${paneGridClass}`}>
           {activeTab.panes.map((pane) => (
             <TerminalPane
               key={pane.id}
@@ -231,13 +231,13 @@ function TerminalPane({
   return (
     <div
       onClick={onFocus}
-      className="flex min-w-0 min-h-0 flex-col rounded-lg p-2"
+      className="flex min-w-0 min-h-0 flex-col rounded-lg p-3"
       style={{
         backgroundColor: '#15161A',
         border: active ? `1px solid ${GOLD}` : '1px solid rgba(255,255,255,0.1)',
       }}
     >
-      <div className="mb-2 flex items-center gap-2 px-1 text-xs" style={{ color: TEXT_SECONDARY }}>
+      <div className="mb-3 flex items-center gap-2 px-2 text-xs" style={{ color: TEXT_SECONDARY }}>
         <span className="inline-block h-2 w-2 rounded-full" style={{ background: info.connected ? '#2ECC71' : '#7A7D85' }} />
         {host ? (info.connected ? `Connected — ${host.name}` : `Disconnected — ${host.name}`) : 'Select a host to connect'}
         {host && (
@@ -259,7 +259,9 @@ function TerminalPane({
           </select>
         )}
       </div>
-      <div ref={cellRef} className="min-h-0 flex-1" />
+      <div className="min-h-0 flex-1" style={{ padding: '0 6px' }}>
+        <div ref={cellRef} className="h-full w-full" />
+      </div>
     </div>
   )
 }