[bug]: sidebar main width not calculated well

[AlmogBaku]

Describe the bug

When using the sidebar, the main width isn't calculated correctly. This is especially problematic when used with another component, such as resizable.

Workaround, use this for your main body:

import { cn } from '@/lib/utils.ts';
import { useSidebar } from '@/components/ui/sidebar.tsx';

export const LayoutMain = ({ children }: { children: React.ReactNode }) => {
  const { state, isMobile } = useSidebar();
  return (
    <main
      className={cn(
        'flex-1 space-y-4 p-8 pt-6',
        isMobile
          ? 'w-full'
          : state === 'expanded'
            ? 'w-[calc(100vw-var(--sidebar-width))]'
            : 'w-[calc(100vw-var(--sidebar-width-icon)+(--spacing(4)))]',
      )}
    >
      {children}
    </main>
  );
};

Affected component/components

Sidebar, Resizable

How to reproduce

Codesandbox/StackBlitz link

No response

Logs

System Info

-

Before submitting

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