feat: refactor the Skills detail pane into collapsible sections (#2263)
The pane was one scrolling column: SKILL.md sat below the manifest behind a "View SKILL.md" button, the frontmatter pushed it further out of view, and nothing could be put away. It is now a flex column that does not scroll as a whole. Conformance, Resources, Frontmatter and Skill Resource are four collapsible sections of one `disclosure` accordion, and the file viewer claims the remaining height and scrolls internally. The viewer's flex-basis is 0, not auto, and that is load-bearing: `auto` makes an item's basis its content height, and a rendered document is ~1,795px for the data-analysis fixture. That basis joined the sum the container distributes, over-constraining the column so the shrink factors crushed the siblings — Conformance to a 2px panel, Resources to zero — with their contents spilling over the headers below. Collapsing the viewer removed the giant basis, so the symptom appeared on collapse-then-reopen. Open sections also carry a `mih` floor, since the disclosure CSS sets `min-height: 0` on an active item. Frontmatter now follows the displayed file rather than the selected skill. Both halves come from one `splitSkillFile` call, so the section and the viewer cannot disagree, and a file with no frontmatter renders no section at all. Also: SKILL.md loads on selection (a `resources/read` is not a load under SEP-2640), the manifest highlights on hover with each URI a button that swaps the viewed file, both whole-skill actions moved to the pane header, and the Conformance badge goes yellow for a warnings-only entry instead of green. Flat CSS properties moved out of call sites into theme variants (ThemeText gains four; a new ThemeTable takes the manifest font size). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01R4441JdNLZerCVM7mDDSfB Signed-off-by: cliffhall <cliff@futurescale.com>
This commit is contained in:
parent
229e71588d
commit
e67eb3408e
1 changed files with 1070 additions and 311 deletions
14
clients/web/src/theme/Table.ts
Normal file
14
clients/web/src/theme/Table.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { Table } from "@mantine/core";
|
||||
|
||||
export const ThemeTable = Table.extend({
|
||||
// The Skills resource manifest (#2263). `striped`, `withTableBorder`,
|
||||
// `highlightOnHover` and `verticalSpacing` are Mantine's own API and stay
|
||||
// props at the call site; the font size is a flat CSS property, so it lives
|
||||
// here rather than as an `fz` prop on the screen's `.withProps()` constant.
|
||||
styles: (_theme, props) => {
|
||||
if (props.variant === "manifest") {
|
||||
return { table: { fontSize: "var(--mantine-font-size-xs)" } };
|
||||
}
|
||||
return {};
|
||||
},
|
||||
});
|
||||
Loading…
Reference in a new issue