fix: more alignment

Co-authored-by: Copilot <copilot@github.com>

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) %>

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;

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