[bug]: Scroll issue on new block sidebar-16

[adiramardiani]

Describe the bug

Hi @Jacksonmills @shadcn
Thanks for the blocks, but I have some issue here

1. the width when resizing is weird, for some md or other screensize, the content show some weird horizontal scroll
2. when content is just short, the block still give me vertical scroll, the remaining I think equal to header height

Here my trial & error

1. On first point happen on sidebar-7 to, What do you thing or any best practice, I dont know this is the best practice or not, but I fix using (thanks @rezaafaisal ) :

<div className="[--header-height:calc(theme(spacing.14))]">
  <SidebarProvider className="flex flex-col">
    <SiteHeader />
    <div className="flex flex-1">
      <AppSidebar />
      <SidebarInset
        className={cn(
          'w-full',

          'peer-data-[state=collapsed]:max-w-[calc(100vw-var(--sidebar-width-icon)-1rem)]',
          'peer-data-[state=expanded]:max-w-[calc(100vw-var(--sidebar-width)-1rem)]',

          'transition-[width] duration-200 ease-linear'
        )}
      >
        {children}
      </SidebarInset>
    </div>
  </SidebarProvider>
</div>;

2. I dont know how to solve, but the scroll still annonying

Recording.2025-02-14.203058.mp4

here the v0 if you want demo
https://v0.dev/chat/sidebar-16-TO3dinOZ5o3?b=b_IiiEJQ2DaPR
https://kzmjklowe3cyql650pxu.lite.vusercontent.net/dashboard

Affected component/components

sidebar

How to reproduce

Recording.2025-02-14.203058.mp4

here the v0 if you want demo
https://v0.dev/chat/sidebar-16-TO3dinOZ5o3?b=b_IiiEJQ2DaPR
https://kzmjklowe3cyql650pxu.lite.vusercontent.net/dashboard

Codesandbox/StackBlitz link

No response

Logs

System Info

WSL

Before submitting

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

[rubixvi]

I'm assuming you're on tailwind v4 which has some changes to get it to work.

[adiramardiani]

I'm assuming you're on tailwind v4 which has some changes to get it to work.

I'm so sorry, I don't get the point in your comment @rubixvi , it is very inappropriate you not help or give solution but just comment to ASSUME that when you can first check & re-check the code that I share, you can download my demo code in v0 and check for yourself what version I am using

Here my package.json generated from v0 download, I'm using tailwindcss v3

{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}

[rubixvi]

Cool well, this was something i've solved already, but you're on your own.

[ershisan99]

I've just run into the same issue, have you managed to find a workaround?

[Chukwu3meka]

@adiramardiani I've had similar issue in the past, I think sidebar takes the width of the device

[Chukwu3meka]

Let me work on this