Skip to content

fix: layer editor toolbar below modals #5082

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ComputelessComputer wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: layer editor toolbar below modals #5082

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions apps/desktop/src/editor/widgets/format-toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,10 @@ const TOOLBAR_BUTTONS: {
export function FormatToolbar() {
const toolbarRef = useRef<HTMLDivElement>(null);
const cleanupRef = useRef<(() => void) | null>(null);
const portalRoot =
typeof document === "undefined"
? null
: (document.getElementById("root") ?? document.body);

const editorState = useEditorState();
const hasSelection = editorState ? !editorState.selection.empty : false;
Expand Down Expand Up @@ -87,6 +91,7 @@ export function FormatToolbar() {

const update = () => {
void computePosition(referenceEl, toolbar, {
strategy: "fixed",
placement: "top",
middleware: [offset(8), flip(), shift({ padding: 8 })],
}).then(({ x, y }) => {
Expand All @@ -102,16 +107,16 @@ export function FormatToolbar() {
update();
});

if (!hasSelection || !editorState) return null;
if (!hasSelection || !editorState || !portalRoot) return null;

return createPortal(
<div
ref={toolbarRef}
className={cn([
"absolute z-[9999] flex items-center gap-0.5 rounded-lg bg-white p-1",
"fixed z-30 flex items-center gap-0.5 rounded-lg bg-white p-1",
"shadow-[0_0_0_1px_rgba(0,0,0,0.05),0_6px_12px_-3px_rgba(0,0,0,0.08)]",
])}
style={{ top: 0, left: 0 }}
style={{ position: "fixed", top: 0, left: 0 }}
Copy link
Copy Markdown

@cursor cursor Bot Apr 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Redundant inline position: "fixed" duplicates Tailwind class

Low Severity

The inline style sets position: "fixed" while the className already includes the Tailwind fixed utility, which applies the same CSS property. No other component in the codebase combines both. This redundancy could confuse future maintainers if one declaration is updated without the other, creating a subtle inconsistency risk.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 701a2c3. Configure here.

onMouseDown={(e) => e.preventDefault()}
>
{TOOLBAR_BUTTONS.map((button) => {
Expand All @@ -133,6 +138,6 @@ export function FormatToolbar() {
);
})}
</div>,
document.body,
portalRoot,
);
}
Loading