agent_coder
5280392fc4
The code-block control panel (language selector + copy) took a full row above the code. Move both to an absolute overlay in the top-right corner and hide the language selector until the block is hovered/focused; the copy button stays always visible. In read-only the language selector isn't rendered at all. The <pre> (editable contentDOM) stays FIRST in the DOM so click hit-testing (#146) is not regressed; the panel leaves the flow via position:absolute. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
54 lines
1.5 KiB
CSS
54 lines
1.5 KiB
CSS
.selectInput {
|
|
height: 25px;
|
|
min-height: 25px;
|
|
}
|
|
|
|
.error {
|
|
color: light-dark(var(--mantine-color-red-8), var(--mantine-color-red-7));
|
|
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-gray-8));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.mermaid {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* #146: the menu follows the <pre> in the DOM (so the editable contentDOM is
|
|
FIRST and click hit-testing is correct). Instead of sitting in-flow, it is
|
|
floated into the top-right corner as an absolute overlay anchored to the
|
|
`position: relative` .codeBlock wrapper (see code.css), so it no longer
|
|
takes a full-width row above the code. The Mantine dropdown is portaled, so
|
|
it is never clipped by the overlay. */
|
|
.menuGroup {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
z-index: 1;
|
|
gap: 4px;
|
|
|
|
@media print {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* The language selector is hidden until the block is hovered, or the selector
|
|
itself is focused / its dropdown is open. It keeps its width in the flex
|
|
Group (only opacity toggles) so the copy button never jumps, and
|
|
`pointer-events: none` while hidden lets clicks fall through to the code.
|
|
`.codeBlock` is the global NodeViewWrapper class → use :global(). */
|
|
.languageSelect {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 150ms ease;
|
|
}
|
|
|
|
:global(.codeBlock):hover .languageSelect,
|
|
.languageSelect:focus-within {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|