Give the slash menu the full card by padding the editor, not the card

Crepe appends the slash menu to .milkdown and (in this version) doesn't expose
a way to portal it to <body>, so it's clipped by the editor's scroll box. That
box sat inside the card's p-5 padding, so the menu cut off at the padding edge.
Move the padding onto the ProseMirror content instead and drop the redundant
inner scroll container, so the menu's clipping bounds become the full card.

https://claude.ai/code/session_019DU6V5z6Nr4Vu7b1fBDnq4
This commit is contained in:
Claude
2026-05-30 17:12:31 +00:00
parent 7af0f575a7
commit 90bb977e02
2 changed files with 9 additions and 3 deletions
@@ -69,6 +69,9 @@
overflow-y: auto;
}
/* Pad the content (not the card) so the slash menu — which Crepe appends to
* .milkdown — can use the full card width/height before clipping. */
.llink-crepe--fill .milkdown .ProseMirror {
min-height: 100%;
padding: 1.25rem;
}
@@ -190,8 +190,11 @@ export function TextEditor({
{...dropZoneProps}
onKeyDownCapture={handleKeyDown}
>
<div className="mx-8 flex h-[calc(100%-8rem)] w-full min-w-0 flex-col overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-5 backdrop-blur-xl">
<div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
<div className="mx-8 flex h-[calc(100%-8rem)] w-full min-w-0 flex-col overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl">
{/* No padding here: the editor's own scroll box hosts the slash menu,
so we pad inside the editor (ProseMirror) instead. That keeps the
menu's clipping bounds the full card rather than the inset box. */}
<div className="min-h-0 flex-1">
<MarkdownEditor
value={textContent}
onChange={onTextChange}
@@ -200,7 +203,7 @@ export function TextEditor({
</div>
{hasEnrichments && strip && (
<div className="shrink-0 border-t border-white/10 pt-3">
<div className="shrink-0 border-t border-white/10 px-5 py-3">
{strip}
</div>
)}