fix : slash menu overflow causing page scroll

[kpark1208]

Issue : #15794

Context

As shown in the linked issue, slash menu dropdown for rich text editor at bottom of notes editor screen extended beyond the page container, causing main page to scroll.

Changes Made

Added floating UI's flip() middleware to the component in CustomSlashMenu.tsx so that the menu automatically flips upward when detecting not enough space for dropdown. This prevents overflow beyond the page container.

Additionally, added offset to menu when flipping up to prevent overlapping of the current line / caret.

Results

testing.mov

[github-actions]

Welcome!

Hello there, congrats on your first PR! We're excited to have you contributing to this project.
By submitting your Pull Request, you acknowledge that you agree with the terms of our Contributor License Agreement.

Generated by 🚫 dangerJS against c31f5d6

[greptile-apps]

Greptile Overview

Greptile Summary

Fixed slash menu overflow issue by adding Floating UI's flip() and offset() middleware to CustomSlashMenu.tsx. The menu now automatically repositions upward when there's insufficient space below, preventing page overflow.

Key changes:

• Added flip() middleware to detect available space and flip placement
• Added conditional offset() that applies 50px spacing when flipped to top placement
• Follows existing pattern from SlashCommandMenu.tsx in advanced-text-editor module

Confidence Score: 4/5

• This PR is safe to merge with minimal risk
• The implementation correctly uses Floating UI's standard middleware pattern that's already used elsewhere in the codebase. The fix is minimal, focused, and addresses the specific overflow issue without introducing new dependencies or architectural changes. Minor point deduction for lack of tests and the hardcoded 50px offset value.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx	4/5	Added flip() and offset() middleware to prevent menu overflow; offset implementation is conditional based on placement

Sequence Diagram

sequenceDiagram
    participant User
    participant Editor as Rich Text Editor
    participant SlashMenu as CustomSlashMenu
    participant FloatingUI as @floating-ui/react
    participant DOM as Document Body

    User->>Editor: Types "/" command
    Editor->>SlashMenu: Render with items
    SlashMenu->>FloatingUI: useFloating({placement: 'bottom-start'})
    FloatingUI->>FloatingUI: Calculate available space
    
    alt Sufficient space below
        FloatingUI->>FloatingUI: flip() keeps bottom placement
        FloatingUI->>FloatingUI: offset() returns 0
        FloatingUI-->>SlashMenu: Position below with 0 offset
    else Insufficient space below
        FloatingUI->>FloatingUI: flip() changes to top placement
        FloatingUI->>FloatingUI: offset() returns 50px
        FloatingUI-->>SlashMenu: Position above with 50px offset
    end
    
    SlashMenu->>DOM: createPortal(menu, document.body)
    DOM-->>User: Display menu in viewport
    
    Note over SlashMenu,FloatingUI: autoUpdate tracks position changes
    
    User->>SlashMenu: Scrolls or resizes
    FloatingUI->>FloatingUI: Recalculate position
    FloatingUI-->>SlashMenu: Update floatingStyles
    SlashMenu->>DOM: Re-render at new position

Loading

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:48347

This environment will automatically shut down when the PR is closed or after 5 hours.

[etiennejouan]

Thank you for your contribution. It works fine, nice job ! 👏

During testing, I wondered if we could have a better logic for the offset. If we open slash menu on a heading block, slash menu overlaps with cursor and text.
I'll check for dynamic solution before approving. If you find one, do not hesitate to commit. It's nitpick, if we don't find anything, we'll merge as is.