fix: ensure side panel content doesn't shrink

[Devessier]

Ensure side panel's content doesn't change during the animation. I set a fixed width to the content and rely on the parent to hide overflowing content.

Before

CleanShot.2026-02-05.at.15.48.26.mp4

After

CleanShot.2026-02-05.at.15.47.28.mp4

[cubic-dev-ai]

No issues found across 1 file

[greptile-apps]

Greptile Overview

Greptile Summary

Changed StyledSidePanel width from 100% to var(--command-menu-width) to prevent content from shrinking during the side panel's open/close animation.

• Fixed animation jank where side panel content would resize as the parent wrapper animated
• Inner panel now maintains fixed width matching the CSS variable value
• Parent wrapper still handles overflow clipping and width transitions
• Consistent with the wrapper's approach of using the same CSS variable

Confidence Score: 5/5

• This PR is safe to merge with no risk
• Simple CSS fix that correctly addresses animation jank with a one-line change, follows existing patterns in the codebase, and has no logical or behavioral side effects
• No files require special attention

Important Files Changed

Filename	Overview
packages/twenty-front/src/modules/command-menu/components/CommandMenuSidePanelForDesktop.tsx	Fixed side panel width to prevent content shrinking during animation by using CSS variable instead of 100%

Sequence Diagram

sequenceDiagram
    participant User
    participant Component as CommandMenuSidePanelForDesktop
    participant WidthEffect as CommandMenuWidthEffect
    participant Recoil as commandMenuWidthState
    participant DOM as CSS Variable
    participant Wrapper as StyledSidePanelWrapper
    participant Panel as StyledSidePanel

    Note over Component: Component renders
    Component->>WidthEffect: Renders CommandMenuWidthEffect
    WidthEffect->>Recoil: useRecoilValue(commandMenuWidthState)
    Recoil-->>WidthEffect: Returns width (e.g., 350px)
    WidthEffect->>DOM: setProperty('--command-menu-width', '350px')
    
    Note over Component: User opens command menu
    Component->>Wrapper: isOpen=true triggers width transition
    Wrapper->>DOM: width: var(--command-menu-width)
    Note over Wrapper: Animates from 0px to 350px
    
    Panel->>DOM: width: var(--command-menu-width)
    Note over Panel: Fixed width prevents shrinking
    Note over Wrapper: overflow: hidden clips content
    
    Note over Wrapper: Animation completes
    Wrapper->>Component: onTransitionEnd()
    Component->>Component: setShouldRenderContent(true)

Loading

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[Copilot]

Pull request overview

This PR fixes an animation issue where the side panel's content would shrink during the open/close animation. The fix changes the inner panel's width from a relative 100% to a fixed CSS variable value, allowing the parent wrapper to handle the animation while the content maintains its size.

Changes:

• Modified StyledSidePanel width from 100% to var(--command-menu-width) to prevent content shrinkage during animation

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

🚀 Preview Environment Ready!

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

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

[Devessier]

This introduces a small regression when resizing the side panel. I'm not fully satisfied. We should find a better solution.