Fix builder type menu clipping

This commit is contained in:
2026-06-13 16:47:00 -06:00
parent f696293e91
commit 0a02fbfd28
+4 -2
View File
@@ -263,6 +263,7 @@ export default function Builder({ form: initial, members, currentUserId, publicF
onHeight={(height) => updateField(f.id, { height })}
onRemove={() => removeField(f.id)}
onDuplicate={() => duplicateField(f.id)}
menuOpen={slashFor === f.id}
onOpenSlash={() => setSlashFor(f.id)}
onKey={(e) => {
if (e.key === "/" && (e.target as HTMLInputElement).selectionStart === 0 && f.label === "") {
@@ -584,7 +585,7 @@ function FormHeaderEditor({ form, onChange }: { form: FormData; onChange: (p: Pa
// ── WYSIWYG field row ──────────────────────────────────────────────────────
function FieldRow({ field, selected, registerInput, onSelect, onLabel, onHeight, onRemove, onDuplicate, onOpenSlash, onKey, children }: {
function FieldRow({ field, selected, registerInput, onSelect, onLabel, onHeight, onRemove, onDuplicate, menuOpen, onOpenSlash, onKey, children }: {
field: Field;
selected: boolean;
registerInput: (el: HTMLInputElement | null) => void;
@@ -593,6 +594,7 @@ function FieldRow({ field, selected, registerInput, onSelect, onLabel, onHeight,
onHeight: (height: number) => void;
onRemove: () => void;
onDuplicate: () => void;
menuOpen: boolean;
onOpenSlash: () => void;
onKey: (e: React.KeyboardEvent<HTMLInputElement>) => void;
children?: React.ReactNode;
@@ -711,7 +713,7 @@ function FieldRow({ field, selected, registerInput, onSelect, onLabel, onHeight,
return (
<li ref={setNodeRef} style={style} onClick={onSelect}
className={`builder-field-card group relative bg-[rgb(var(--surface))] rounded-xl border cursor-pointer
transition-all duration-150 overflow-hidden
transition-all duration-150 ${menuOpen ? "z-30 overflow-visible" : "overflow-hidden"}
${selected
? "border-[rgb(var(--accent)/0.5)] shadow-[var(--shadow-md)] ring-2 ring-[rgb(var(--accent)/0.12)]"
: "border-[rgb(var(--line)/0.6)] shadow-[var(--shadow-xs)] hover:shadow-[var(--shadow-sm)] hover:border-[rgb(var(--line))]"