[bug]: SidebarProvider sliding effect with nested Button on mobile

[jmaldon1]

Describe the bug

I get a wierd visual sliding effect when I set size="icon" on a nested component within a SidebarProvider. but I only see this behavior on a mobile screen. I am on next JS if that matters.

The video below shows the issue with the size="icon" prop enabled, then I comment it out and refresh the page to show it stops the issue:

Recording.2024-12-22.170346.mp4

The Component:

    <div className={`flex flex-row ${props.className}`}>
      <MonacoEditorBase
        code={code}
        updateCode={updateCode}
        diagnosticsInfo={diagnosticsInfo}
        className="h-full"
        {...props}
      />
      <Button
        variant="outline"
        size="icon"
        className="flex w-8 h-full"
        onClick={resetCode}
      >
        <RotateCcw size={18} />
      </Button>
    </div>

Affected component/components

SidebarProvider, Button

How to reproduce

1. Open the mobile view on chrome
2. Leaving the size="icon" prop, I will see the sliding and refresh
3. Commenting out the size prop or changing it to another value besides icon will stop the issue.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Next JS, Chrome

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues