fix: broken CSS in the bottom panel fixed

AGENTS.md

@@ -30,6 +30,7 @@ This document provides context and best practices for GitHub Copilot when workin
 - you MUST run tests with command line tools at least once to capture compile errors in tests, do not use the integrated testing of vscode, as that blocks on compile errors
 - you MUST run build, test, credo, deps.audit and check dialyzer messages and you MUST treet warnings as errors and fix them. we want clean builds, clean tests, clean credo, clean dependency audits and clean dialyzer results
 - on a headless Linux machine, you have to run tests with this command (if mix test complains about DISPLAX): xvfb-run mix test
+- CSS precedence: Tailwind utilities and the ui-* kit (utilities.css) are in @layer and ALWAYS lose to the unlayered hand-written files (shell.css, panel.css, ...). Convention: hand-written CSS owns appearance, Tailwind utilities in templates own layout — never put display/flex-direction/size rules in hand-written CSS for elements whose layout the template controls, and define each selector in exactly one file.
 
 ---
 

assets/css/editor.css

@@ -49,8 +49,7 @@
   border-radius: 3px;
 }
 
-.editor-toolbar-button:hover,
-.panel-tab:hover {
+.editor-toolbar-button:hover {
   background: var(--vscode-toolbar-hoverBackground);
 }
 

assets/css/panel.css

@@ -8,14 +8,11 @@
   display: none;
 }
 
-.panel-tabs {
-  display: flex;
-  gap: 8px;
-}
-
 .panel-tabs {
   display: flex;
   gap: 2px;
+  align-items: stretch;
+  height: 100%;
 }
 
 .panel-tab {
@@ -246,6 +243,12 @@
   background-color: var(--vscode-sideBar-background);
 }
 
+/* .panel-entry (shell.css) forces flex-direction: column and, being unlayered,
+   beats the Tailwind row utilities on this button — force the row here. */
+.task-group-toggle {
+  flex-direction: row;
+}
+
 .output-entry {
   padding: 8px;
   border-bottom: none;

assets/css/shell.css

@@ -402,24 +402,6 @@
   border-bottom: 1px solid var(--vscode-panel-border);
 }
 
-.panel-tabs {
-  display: flex;
-  align-items: stretch;
-  height: 100%;
-}
-
-.panel-tab {
-  border: none;
-  background: transparent;
-  color: var(--vscode-descriptionForeground);
-  padding: 0 12px;
-  cursor: pointer;
-}
-
-.panel-tab.active {
-  color: var(--vscode-tab-activeForeground);
-}
-
 .panel-close {
   background: transparent;
   border: none;
@@ -778,11 +760,6 @@
   padding-left: 18px;
 }
 
-.editor-toolbar {
-  display: flex;
-  gap: 10px;
-}
-
 .editor-meta {
   display: flex;
   flex-direction: column;

lib/bds/desktop/shell_live/index.html.heex

@@ -457,7 +457,7 @@
           <div class="panel-tabs flex min-w-0 items-center overflow-x-auto">
             <%= for tab <- @panel_tabs do %>
               <button
-                class={["panel-tab", "ui-tab", if(@workbench.panel.active_tab == tab, do: "ui-tab-active"), "inline-flex h-9 items-center px-3 text-xs uppercase tracking-wide", if(@workbench.panel.active_tab == tab, do: "active")]}
+                class={["panel-tab", "ui-tab", if(@workbench.panel.active_tab == tab, do: "ui-tab-active"), "inline-flex items-center px-3 text-xs uppercase tracking-wide", if(@workbench.panel.active_tab == tab, do: "active")]}
                 type="button"
                 phx-click="select_panel_tab"
                 phx-value-tab={tab}

test/bds/ui/task_grouping_test.exs

@@ -72,7 +72,7 @@ defmodule BDS.UI.TaskGroupingTest do
     end
 
     test "empty group summarizes to zero" do
-      assert %{total: 0, progress: 0.0} = TaskGrouping.summarize_task_group([])
+      assert %{total: 0, progress: +0.0} = TaskGrouping.summarize_task_group([])
     end
   end
 end