diff --git a/AGENTS.md b/AGENTS.md
index 4ca185e..21f7fd1 100644
--- a/AGENTS.md
+++ b/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.
---
diff --git a/assets/css/editor.css b/assets/css/editor.css
index 5f84cbe..965beeb 100644
--- a/assets/css/editor.css
+++ b/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);
}
diff --git a/assets/css/panel.css b/assets/css/panel.css
index 6343820..1343793 100644
--- a/assets/css/panel.css
+++ b/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;
diff --git a/assets/css/shell.css b/assets/css/shell.css
index da7c219..54e76cc 100644
--- a/assets/css/shell.css
+++ b/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;
diff --git a/lib/bds/desktop/shell_live/index.html.heex b/lib/bds/desktop/shell_live/index.html.heex
index a470c64..65010c4 100644
--- a/lib/bds/desktop/shell_live/index.html.heex
+++ b/lib/bds/desktop/shell_live/index.html.heex
@@ -457,7 +457,7 @@
<%= for tab <- @panel_tabs do %>