From 2eb9406f05ac64b92c040cd9d20ab4363b82d811 Mon Sep 17 00:00:00 2001
From: Andy Dixon <andy@dixon.cx>
Date: Thu, 16 Apr 2026 00:00:00 +0100
Subject: [PATCH] Fix SFTP panel to overlay terminal as a slide-out panel

Changed from flex-sibling layout (broken by absolute-positioned terminal
container) to an overlay approach: the SFTP panel is now position:absolute
on the right edge with a drop shadow, sliding over the terminal. The
resize handle is embedded inside the panel at its left edge.
---
 frontend/src/css/sftp.css | 48 +++++++++++++++++----------------------
 frontend/src/js/sftp.js   | 11 ++-------
 2 files changed, 23 insertions(+), 36 deletions(-)

diff --git a/frontend/src/css/sftp.css b/frontend/src/css/sftp.css
index 9db2246..4cb2016 100644
--- a/frontend/src/css/sftp.css
+++ b/frontend/src/css/sftp.css
@@ -4,9 +4,13 @@
    ========================================================================== */
 
 /* -----------------------------------------------------------------------
-   Panel wrapper — sits inside the session-panel as a flex sibling
+   Panel wrapper — overlays the terminal from the right side
    ----------------------------------------------------------------------- */
 .sftp-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
     width: 300px;
     min-width: 220px;
     max-width: 50vw;
@@ -15,20 +19,26 @@
     background: var(--bg-surface);
     border-left: 1px solid var(--border-subtle);
     overflow: hidden;
-    flex-shrink: 0;
+    z-index: var(--z-dropdown, 50);
+    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
 }
 
-/* When the session panel has an SFTP panel, switch to row layout */
-.session-panel.has-sftp {
-    flex-direction: row;
+/* Resize handle — positioned at the left edge of the SFTP panel */
+.sftp-resize-handle {
+    position: absolute;
+    top: 0;
+    left: -3px;
+    bottom: 0;
+    width: 6px;
+    cursor: col-resize;
+    background: transparent;
+    z-index: var(--z-dropdown, 50);
+    transition: background var(--transition-fast);
 }
 
-/* Terminal container must become a flex child when SFTP panel is open */
-.session-panel.has-sftp .terminal-container {
-    position: relative;
-    inset: unset;
-    flex: 1;
-    min-width: 0;
+.sftp-resize-handle:hover,
+.sftp-resize-handle.is-dragging {
+    background: var(--accent);
 }
 
 /* -----------------------------------------------------------------------
@@ -327,19 +337,3 @@
     outline: none;
     box-shadow: 0 0 0 2px var(--accent-muted);
 }
-
-/* -----------------------------------------------------------------------
-   Resize handle between terminal and SFTP panel
-   ----------------------------------------------------------------------- */
-.sftp-resize-handle {
-    width: 4px;
-    cursor: col-resize;
-    background: transparent;
-    flex-shrink: 0;
-    transition: background var(--transition-fast);
-}
-
-.sftp-resize-handle:hover,
-.sftp-resize-handle.is-dragging {
-    background: var(--accent);
-}
diff --git a/frontend/src/js/sftp.js b/frontend/src/js/sftp.js
index 430ef8a..bfee8c6 100644
--- a/frontend/src/js/sftp.js
+++ b/frontend/src/js/sftp.js
@@ -101,6 +101,7 @@ class SFTPBrowser {
         // Build the panel DOM
         var panel = createElement('div', 'sftp-panel');
         var handle = createElement('div', 'sftp-resize-handle');
+        panel.appendChild(handle);
         state.el = panel;
         state.handle = handle;
 
@@ -119,9 +120,7 @@ class SFTPBrowser {
 
         this.panels.set(sessionId, state);
 
-        // Switch session panel to row layout and append
-        sessionPanel.classList.add('has-sftp');
-        sessionPanel.appendChild(handle);
+        // Append the overlay panel into the session panel
         sessionPanel.appendChild(panel);
 
         this._setupResize(sessionId, state);
@@ -142,12 +141,6 @@ class SFTPBrowser {
         if (!state) return;
 
         state.el.remove();
-        state.handle.remove();
-
-        var sessionPanel = document.getElementById('panel-' + sessionId);
-        if (sessionPanel) {
-            sessionPanel.classList.remove('has-sftp');
-        }
 
         this.panels.delete(sessionId);
         this._refitTerminal(sessionId);