7ed71ccd37
The panel carries the shared .card class, and '.card { position: relative }'
loads after the popover stylesheet, so equal specificity let bundle order
strip the panel's position: fixed — it then flowed inside the documents
viewer and rendered clipped at the bottom-right of the viewport, far from
the selection. A .selection-comment-panel.card rule restores fixed
positioning immune to order; the panel's left is now a width-aware clamp
(no half-offscreen composer near viewport edges), top is clamped near the
bottom, and the textarea focuses with preventScroll so opening the
composer no longer scrolls the selected content out of view.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
125 lines
4.5 KiB
CSS
125 lines
4.5 KiB
CSS
.selection-comment-trigger,
|
|
.selection-comment-panel {
|
|
position: fixed;
|
|
z-index: 10001;
|
|
left: var(--selection-comment-left);
|
|
top: var(--selection-comment-top);
|
|
}
|
|
|
|
.selection-comment-trigger {
|
|
transform: translate(-50%, calc(-1 * var(--space-xl)));
|
|
box-shadow: var(--shadow-md);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/*
|
|
FNXC:ArtifactsView 2026-07-10-16:05:
|
|
The "Add comment" trigger is positioned entirely by its transform translate. The global
|
|
`.btn:active { transform: scale(0.97) }` press feedback REPLACED that translate while the
|
|
mouse button was held, teleporting the trigger about half its width right and one spacing
|
|
unit down between mousedown and mouseup, so the browser never dispatched `click` on the
|
|
button and the comment composer silently never opened (user-reported no-op while viewing a
|
|
markdown file in the Artifacts view; reproduced with real mouse events — jsdom clicks
|
|
cannot catch this).
|
|
Every :active override here must restate the positioning translate alongside the press
|
|
feedback so the trigger stays under the cursor for the whole press. This one shared rule
|
|
covers all popover surfaces: DocumentsView project-file preview (plain and markdown) and
|
|
FileEditor (editor and preview), desktop and mobile.
|
|
*/
|
|
.selection-comment-trigger:active {
|
|
transform: translate(-50%, calc(-1 * var(--space-xl))) scale(0.97);
|
|
}
|
|
|
|
/*
|
|
FNXC:ArtifactsView 2026-07-10-18:20:
|
|
The composer panel carries the shared `.card` class, and `.card { position: relative }` loads AFTER
|
|
this file in the bundle, so at equal specificity it silently replaced the panel's `position: fixed`.
|
|
The panel then flowed inside `.documents-content-viewer` with the left/top vars applied as relative
|
|
offsets — rendering clipped at the bottom-right of the viewport nowhere near the selection.
|
|
`.selection-comment-panel.card` (0,2,0) makes the fixed positioning immune to bundle order.
|
|
The `left` clamp keeps the whole panel inside the viewport on every width: it accounts for half the
|
|
panel width (the panel is centered on the selection via translate(-50%)), and the `top` clamp stops
|
|
a selection near the bottom of the viewport from pushing the composer off-screen.
|
|
*/
|
|
.selection-comment-panel.card {
|
|
position: fixed;
|
|
}
|
|
|
|
.selection-comment-panel {
|
|
--scp-width: min(var(--selection-comment-panel-width, calc(var(--space-2xl) * 12)), calc(100vw - (var(--space-lg) * 2)));
|
|
width: var(--scp-width);
|
|
left: clamp(calc(var(--space-lg) + (var(--scp-width) / 2)), var(--selection-comment-left), calc(100vw - var(--space-lg) - (var(--scp-width) / 2)));
|
|
top: min(var(--selection-comment-top), calc(100vh - var(--space-lg) - 20rem));
|
|
transform: translate(-50%, var(--space-xs));
|
|
padding: var(--space-md);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.selection-comment-title {
|
|
margin: 0;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.selection-comment-snippet {
|
|
margin: 0;
|
|
max-height: calc(var(--space-2xl) * 3);
|
|
overflow: auto;
|
|
color: var(--text-muted);
|
|
background: var(--surface-subtle);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-sm);
|
|
font-family: var(--font-mono);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.selection-comment-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.selection-comment-textarea {
|
|
min-height: calc(var(--space-2xl) * 2.5);
|
|
resize: vertical;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
/*
|
|
FNXC:ArtifactsView 2026-07-10-18:20:
|
|
Only the trigger keeps the simple center-point clamp here — the panel's base rule already applies
|
|
a width-aware clamp on all viewports, and re-declaring `left` in this later block would override
|
|
it with a clamp that lets half the panel hang past the edge.
|
|
*/
|
|
.selection-comment-trigger {
|
|
left: max(var(--space-lg), min(var(--selection-comment-left), calc(100vw - var(--space-lg))));
|
|
}
|
|
|
|
.selection-comment-trigger {
|
|
transform: translate(-50%, calc(-1 * var(--space-2xl)));
|
|
}
|
|
|
|
/*
|
|
FNXC:ArtifactsView 2026-07-10-16:05:
|
|
Mobile uses a taller lift, so its :active rule must restate the mobile translate too —
|
|
otherwise the desktop :active rule (space-xl) would snap the pressed trigger to the
|
|
desktop offset and reintroduce the missed-click no-op on touch/landscape-phone widths.
|
|
*/
|
|
.selection-comment-trigger:active {
|
|
transform: translate(-50%, calc(-1 * var(--space-2xl))) scale(0.97);
|
|
}
|
|
|
|
.selection-comment-actions {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.selection-comment-actions .btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|