From 60bacd84f0f706495f0ac24e339c6938d129b727 Mon Sep 17 00:00:00 2001
From: Chili Palmer <hugoms@me.com>
Date: Sun, 26 Apr 2026 07:58:44 +0200
Subject: [PATCH] fix: more alignment

Co-authored-by: Copilot <copilot@github.com>
---
 lib/bds/desktop/shell_live/index.html.heex | 10 ++++++++++
 priv/ui/app.css                            | 23 ++++++++++++++++++++++
 test/bds/desktop/shell_live_test.exs       |  8 ++++++++
 3 files changed, 41 insertions(+)

diff --git a/lib/bds/desktop/shell_live/index.html.heex b/lib/bds/desktop/shell_live/index.html.heex
index c8f8e73..721b822 100644
--- a/lib/bds/desktop/shell_live/index.html.heex
+++ b/lib/bds/desktop/shell_live/index.html.heex
@@ -339,6 +339,16 @@
               </button>
             <% end %>
           </div>
+          <button
+            class="panel-close"
+            data-testid="panel-close"
+            type="button"
+            phx-click="toggle_panel"
+            aria-label={translated("Close panel")}
+            title={translated("Close panel")}
+          >
+            ×
+          </button>
         </div>
         <div class="panel-content">
           <%= render_panel_body(assigns) %>
diff --git a/priv/ui/app.css b/priv/ui/app.css
index 1460b31..a5d05a0 100644
--- a/priv/ui/app.css
+++ b/priv/ui/app.css
@@ -766,6 +766,9 @@ button {
   height: 35px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  padding: 0 8px;
+  background-color: var(--vscode-sideBar-background);
   border-bottom: 1px solid var(--vscode-panel-border);
 }
 
@@ -787,6 +790,26 @@ button {
   color: var(--vscode-tab-activeForeground);
 }
 
+.panel-close {
+  background: transparent;
+  border: none;
+  color: var(--vscode-descriptionForeground);
+  font-size: 18px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 0;
+}
+
+.panel-close:hover {
+  background-color: var(--vscode-list-hoverBackground);
+  color: var(--vscode-editor-foreground);
+}
+
 .panel-content {
   flex: 1;
   overflow: auto;
diff --git a/test/bds/desktop/shell_live_test.exs b/test/bds/desktop/shell_live_test.exs
index ffa4dbf..fc1f670 100644
--- a/test/bds/desktop/shell_live_test.exs
+++ b/test/bds/desktop/shell_live_test.exs
@@ -54,6 +54,14 @@ defmodule BDS.Desktop.ShellLiveTest do
 
     assert html =~ ~s(data-region="panel")
     refute html =~ ~s(class="panel-shell is-hidden")
+    assert html =~ ~s(data-testid="panel-close")
+
+    html =
+      view
+      |> element("[data-testid='panel-close']")
+      |> render_click()
+
+    assert html =~ ~s(class="panel-shell is-hidden")
 
     html =
       view