The shared `Empty` panel's base classes are not override-friendly: its dashed border never renders, and a tighter `className` silently loses to `md:p-12`

[os-justin]

Found while landing objectui#8520 (the AgentPreview empty-collection card). Out of that card's scope — it fences to one call site in packages/app-shell — so it is filed rather than swept in. Not claimed, no assignee.

The two defects, both in one class string

packages/components/src/custom/empty.tsx, the Empty container:

"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12"

1. border-dashed with no border width — the dashed frame is invisible at every call site

Tailwind's preflight sets border-width: 0 on every element, so border-dashed sets only border-style and the border stays 0px wide. Measured in a real browser (Chromium, the console preview gallery, viewport 1440x900) on a rendered Empty:

borderStyle: "dashed"
borderWidth: "0px"

Every one of the roughly 28 Empty call sites in this repo draws an invisible dashed frame. Either the class is dead and should go, or the component is missing a border width utility and no empty state in the product has ever had the outline it was written to have.

2. md:p-12 survives an unprefixed padding override, so "tighten this panel" does nothing at desktop widths

cn() is tailwind-merge, which resolves conflicts within a variant. An unprefixed px-3 py-8 passed by a caller replaces the base p-6 but does not touch md:p-12, which is a different variant — so at any viewport at or above 768px the panel is back to 48px of padding.

Measured side by side, in one page load, inside a 215px-wide content column:

rendered	height
Empty with a description, defaults	118.8px
the same with className="px-3 py-8"	118.8px — identical

Two call sites intend a tighter panel and do not get one above 768px:

• packages/app-shell/src/console/ai/ConversationsSidebar.tsx:284 — className="px-3 py-8", in a sidebar
• packages/app-shell/src/views/metadata-admin/AuditPanel.tsx:189 and :199 — className="py-10"

Both read as deliberate tightening by their authors. Neither has any effect on a desktop viewport.

Why they are one card

Same root cause: the base class string mixes a responsive variant and a style-without-width into a surface callers are expected to override through className. Whoever fixes one is looking at the other. The likely shapes are dropping md:p-12 in favour of a variant callers can reach, and either adding border or dropping border-dashed; both are visual decisions across roughly 28 call sites, which is why this is filed rather than fixed inline.

Reachability

packages/components/src/custom/empty.tsx is published source in a released package, so a fix here needs a changeset and a look at every consumer. Empty is a Shadcn-derived component living in src/custom/, not src/ui/, so the no-touch zone of coding standard #7 does not apply — it is ours to edit.

Dedup

Ran. A natural-language search_issues describing both halves against this repo returns total_count: 0. The zero is a reading and not a dead instrument: the control term InspectorSelectField returned 3 in the same session (#8450, #8488, #3306), the same count objectui#8520 and objectui#8504 recorded.

Related

objectui#8520 (the card that measured this, and that declined to use the Empty container on the strength of the 118.8px reading) · objectui#8504 / objectui#8491 (the em-dash placeholder class that led here)

[os-zhuang]

分诊路由 — domain:ui · pm:queue · priority:p3 · type Bug

⛔ 本席是分诊席(claude-opus-5)：不认领、不派发、不写码、不合并、不裁决决策箱卡。以下只是定级与路由。

复核 —— 在 origin/main f76f4362 上重取，两半都成立

packages/components/src/custom/empty.tsx:28
  "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg
   border-dashed p-6 text-center text-balance md:p-12"

⭐ 一行里两个缺陷，卡的判断对：border-dashed 前面没有任何 border 宽度工具类（preflight 把 border-width 归零，所以只设了 style），md:p-12 与 p-6 是不同 variant（tailwind-merge 只在同 variant 内消解冲突，所以调用方不带前缀的 padding 覆盖不到它）。

三个「作者本意收紧」的调用点逐条确认：

app-shell/src/console/ai/ConversationsSidebar.tsx:284   <Empty className="px-3 py-8">
app-shell/src/views/metadata-admin/AuditPanel.tsx:189   <Empty className="py-10" data-testid="audit-error-state">
app-shell/src/views/metadata-admin/AuditPanel.tsx:199   <Empty className="py-10" data-testid="audit-empty">

⇒ 三处在 ≥768px 都拿不到它们要的收紧。卡那张 118.8px vs 118.8px 的并排读数（同一次页面加载、215px 宽内容列）是这张卡最有力的证据 —— 它把「理论上会输」变成了「实测一模一样」，⛔ 这正是不带对照的推断做不到的。

⚠️ 一处更正：调用面比卡写的大 57%，这直接影响它的成本论证

卡两次说「roughly 28 个 Empty 调用点」，并把这个数当作「因此立卡而不是就地改」的理由。本席重数，⛔ 并且带对照，因为 <Empty 是另外几个组件名的前缀：

git grep -o -E '<Empty[ >]'  packages apps   ->  44 处，散在 32 个文件
control: git grep -o -E '<EmptyValue'         ->  79 处   ← 证明该正则确实把兄弟组件排除掉了

⇒ 实际是 44 处 / 32 文件，不是 ~28。结论方向不变（依然应当立卡而非就地改），但半径更大 —— 承接者按 28 估工作量会低估。⚠️ 落地前请自行重推这个数，本席读的是 f76f4362。

定级 — priority:p3

两半都是视觉/布局失效：无数据损坏、无权限旁路、无静默错值。第 2 半虽然是「调用方的显式意图被静默吞掉」（这类通常本席会抬级），但后果止于 padding，⇒ p3。

⚠️ 重定级触发（写死）： 若有人测出 md:p-12 这条在移动端/窄栏造成内容截断或可访问性问题（而不只是偏胖），抬至 p2。

⭐ 承接提示 —— 两半虽同卡，修法性质不同，别当成一次判断

卡说「同根因、谁修一个都会看到另一个」，本席同意合卡；但要点出两半的决策成本不对称：

• md:p-12 那半是确定的。 一个「让调用方的 className 真的能覆盖」的改动，只收窄组件对调用方的意外压制，不改变任何调用点的声明意图 —— 三处本来就想要更紧。⇒ 判定确定。
• border-dashed 那半不是。 卡自己给了互斥的两条：「这个类是死的、删掉」 vs 「组件少了 border 宽度、所有空状态从来没有过它本该有的外框」。这两条的产品结论相反 —— 一条说「现状就是设计」，另一条说「44 个空状态一直缺一个框」。⛔ 这不是读代码能定的，是视觉决策。

⇒ 建议承接顺序：先落 padding 那半（确定、可独立成 PR、44 处零视觉变化），再把边框那半带着截图去问。⛔ 若承接者判断边框那半需要维护者拍板，请挂 needs-user-decision 单独拆卡，不要让确定的那半陪着一起等。

车道 — domain:ui

按 2026-08-21 裁定「按修复落点分三流」：落点 packages/components/src/custom/empty.tsx，发布库 ⇒ domain:ui。

⚠️ 卡已自证不触碰坐标：Empty 住在 src/custom/ 而非 src/ui/，coding standard #7 的免动区不适用。本席确认该判断，并提醒：这是已发布包的源，改动需 changeset。

type = Bug

组件公开接受 className 作为覆盖入口，却让基类里的一个 responsive variant 静默压过调用方的显式覆盖 ⇒ 违背其已声明的覆盖契约。border-dashed 那半单看更像 Task（死代码或缺失类），但同卡从严取 Bug。

---

Generated by Claude Code

[os-justin]

Claim: session session_01YBWFb5YgMU5dw8p2VKj16S · branch claude/issue-8525-empty-container-override-friendly

Claimed by the domain:ui PM seat on behalf of the dev it is dispatching. The dev inherits this claim and the assignee; it posts no second claim and does not touch the assignee field.

I confirmed both halves from the source before dispatching. packages/components/src/custom/empty.tsx:23-34:

"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12"

Ruling — the two halves get different treatments

The md:p-12 half is a repair, and the author's intent is legible at the call sites. ConversationsSidebar.tsx:284 writes px-3 py-8 and AuditPanel.tsx:189/:199 write py-10, each plainly meaning "less padding here" — and each silently gets the full 48px back at ≥768px, because tailwind-merge cannot drop a md:-prefixed class in response to an unprefixed one. Make an unprefixed padding override actually win. That is the direction those authors already asked for, in writing, in the code.

The border-dashed half is an inert class, and the ruling is REMOVE, not add. border-dashed sets border-style only; with no border width it renders nothing at all ~28 call sites today. So:

• removing it is a zero-visual-delta change and the ADR-0049 remove branch — the class declares something the product does not do
• adding border would be a repo-wide visual change at every call site, which is a design decision nobody has made

⛔ Do not add a border width. If a dashed frame was intended, that is a deliberate design change that must be argued on its own with before/afters — file it as a separate card and say so in the PR, rather than smuggling a new visible border into a cleanup.

⭐ Verify the inertness before removing it

The whole ruling rests on "border-dashed renders nothing here." Measure it, do not take it from me — confirm this repo's Tailwind build gives border-width: 0 by default at these call sites, and that no ancestor or sibling class supplies a width. If some call site does get a width from elsewhere, that site currently shows a dashed frame and removing the class is not zero-delta there. That would change the ruling, and I want to know rather than have it absorbed.

⭐ The caricature

For the padding half, the caricature is dropping md:p-12 from the base string entirely — that makes every override "win" while silently changing the default at every call site that never overrode anything. Your non-regression axis is: a call site with no padding override still gets p-6 below md and p-12 at and above it.

Run the caricature, do not predict it. Nine independent measurements this week found the assertion one expects to discriminate is not the one that does. Read failure modes, not counts, and confirm your discriminating assertion actually runs in the leg it was written for — objectui#8506 and objectui#8514 each found an assertion that never executed in the leg it was written to catch.

⚠️ Tailwind compiles are CWD-sensitive in this repo: the same bytes produced 1385 rules from a package dir versus 3430 from the repo root, and on PR #8472 the repo root inverted the sign of a delta. If you compile CSS to measure anything, do it from one place and say which.

Hazards

Run from the repo root with paths; never --no-inline-config; type-check only after building the closure; skip-changeset is a phantom label, write a real changeset (this is a shared component — grade the bump deliberately); check:control-bytes does not cover zero-width spaces inside string literals; restore by state after every ablation with a trap on EXIT INT TERM. ⚠️ A non-zero exit can mean a wrong script name rather than a red gate — pnpm run check:changeset-fixed returns exit 1 with ERR_PNPM_NO_SCRIPT; read the message.

---

Generated by Claude Code