From b68e249d08286c4f098329993d7a962b1171dcfc Mon Sep 17 00:00:00 2001
From: tmustier <6326440+tmustier@users.noreply.github.com>
Date: Sun, 15 Mar 2026 22:14:51 +0000
Subject: [PATCH] =?UTF-8?q?fix(css):=20make=20heading=20scale=20resilient?=
 =?UTF-8?q?=20=E2=80=94=20target=20markdown-block,=20not=20hook=20class?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The heading size overrides used .pi-assistant-body h1 which depends on
applyMessageStyleHooks() stamping the class on the right DOM node. When
the hook didn't run (streaming, DOM structure changes from dep bumps,
timing races), headings fell back to Tailwind v4's base reset
(font-size: inherit) or browser defaults (2em) — both much too large
for the sidebar.

Now target 'markdown-block h1' directly. markdown-block is a stable
custom element tag in pi-web-ui's light DOM that always exists in the
render tree, so headings are always capped regardless of hook state.

This is the root cause behind the recurring 'headings too large'
reports — the same fragility pattern (hook-dependent selectors failing
when upstream components change) also caused the KaTeX and thinking
block issues fixed earlier.
---
 src/ui/theme/content/message-components.css | 17 +++++++++
 src/ui/theme/content/messages.css           | 41 +++++++++++++++------
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/src/ui/theme/content/message-components.css b/src/ui/theme/content/message-components.css
index 794b8b7..f7ff4df 100644
--- a/src/ui/theme/content/message-components.css
+++ b/src/ui/theme/content/message-components.css
@@ -131,6 +131,23 @@ thinking-block markdown-block {
   overscroll-behavior: contain;
 }
 
+/* Compact heading scale for thinking blocks — override the global
+   markdown-block heading rules which are sized for the message body. */
+thinking-block markdown-block h1,
+thinking-block markdown-block h2,
+thinking-block markdown-block h3 {
+  font-size: var(--text-sm);
+  font-weight: 700;
+  margin: 8px 0 4px;
+}
+thinking-block markdown-block h4,
+thinking-block markdown-block h5,
+thinking-block markdown-block h6 {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  margin: 6px 0 3px;
+}
+
 /* Added by applyMessageStyleHooks() so we don't depend on utility classes. */
 .pi-thinking-label--streaming {
   animation-duration: 1.2s;
diff --git a/src/ui/theme/content/messages.css b/src/ui/theme/content/messages.css
index db2663e..582e933 100644
--- a/src/ui/theme/content/messages.css
+++ b/src/ui/theme/content/messages.css
@@ -33,43 +33,60 @@ assistant-message { margin-right: var(--pill-inset); }
 }
 
 /* ── Markdown heading scale (sidebar-appropriate) ───────────── */
+/*
+ * IMPORTANT: target `markdown-block h1` (stable custom-element tag), NOT
+ * `.pi-assistant-body h1` (hook-dependent class).
+ *
+ * Tailwind v4's base reset (`@layer base`) sets
+ *   h1,h2,...,h6 { font-size: inherit; font-weight: inherit }
+ * which strips browser defaults. Our overrides are unlayered so they win
+ * over the reset, but ONLY if the selector actually matches. The old
+ * `.pi-assistant-body h1` selector failed whenever the style hook didn't
+ * run (streaming, DOM structure changes from upstream bumps, timing
+ * races) — leaving headings at `inherit` with no cap.
+ *
+ * Using `markdown-block h1` always matches because `markdown-block` is a
+ * stable custom element tag in pi-web-ui's light DOM. This also covers
+ * headings inside thinking blocks and tool cards without needing separate
+ * overrides (those have their own more-specific rules if needed).
+ */
 
-.pi-assistant-body h1 {
+markdown-block h1 {
   font-size: var(--text-lg);
   font-weight: 700;
   line-height: 1.3;
   margin: 16px 0 8px;
 }
 
-.pi-assistant-body h2 {
+markdown-block h2 {
   font-size: var(--text-md);
   font-weight: 700;
   line-height: 1.35;
   margin: 14px 0 6px;
 }
 
-.pi-assistant-body h3 {
+markdown-block h3 {
   font-size: var(--text-base);
   font-weight: 700;
   line-height: 1.4;
   margin: 12px 0 4px;
 }
 
-.pi-assistant-body h4,
-.pi-assistant-body h5,
-.pi-assistant-body h6 {
+markdown-block h4,
+markdown-block h5,
+markdown-block h6 {
   font-size: var(--text-base);
   font-weight: 600;
   line-height: 1.4;
   margin: 10px 0 4px;
 }
 
-.pi-assistant-body h1:first-child,
-.pi-assistant-body h2:first-child,
-.pi-assistant-body h3:first-child,
-.pi-assistant-body h4:first-child,
-.pi-assistant-body h5:first-child,
-.pi-assistant-body h6:first-child {
+markdown-block h1:first-child,
+markdown-block h2:first-child,
+markdown-block h3:first-child,
+markdown-block h4:first-child,
+markdown-block h5:first-child,
+markdown-block h6:first-child {
   margin-top: 0;
 }