[bug]: Sidebar with variant="inset" causes 16px page overflow

[vanderneut]

Describe the bug

Description:

The sidebar spacer element uses h-svh which doesn't account for padding on the SidebarProvider. This causes page overflow equal to the total vertical padding.

When using variant="inset", the SidebarProvider gets p-2 (8px padding), causing a 16px overflow.

The core issue:

  /* In Sidebar.vue */
  .h-svh { height: 100svh; } /* Always viewport height, ignores parent padding */

Expected behavior:

The page should not be scrollable when using the standard inset variant configuration.

Current workaround:

  .duration-200.relative.h-svh.w-\[--sidebar-width\] {
    height: calc(100svh - 16px) !important;
  }

Suggested fix:

The sidebar spacer should use h-full instead of h-svh to respect the parent container's padding when using the inset variant.

Affected component/components

Sidebar

How to reproduce

1. Create a new Vue/React app with shadcn/ui

2. Install and setup the Sidebar component

3. Use this structure:

  <SidebarProvider>
    <Sidebar variant="inset" collapsible="icon">
      <SidebarHeader>
        <p>Header</p>
      </SidebarHeader>
      <SidebarContent>
        <p>Content</p>
      </SidebarContent>
    </Sidebar>
    <SidebarInset>
      <div>Main content area</div>
    </SidebarInset>
  </SidebarProvider>

4. Open the browser and observe that the page is scrollable

5. Check browser dev tools - the page height will be 16px taller than the viewport

6. Inspect the sidebar spacer element (div with classes including h-svh) - it has height equal to viewport

7. Inspect SidebarProvider - it has 8px padding from the has-[[data-variant=inset]]:p-2 class

Note: This happens because the sidebar spacer element uses h-svh which doesn't account for the parent container's padding.

Codesandbox/StackBlitz link

This is too complicated to set up with Shadcn for this simple bug. Please see detailed Logs below as well.

Logs

This debug output shows the issue: The viewport is 887px tall, but the page scrollHeight is 895px (8px overflow). The sidebar spacer element (Tall Element 2) has h-svh class making it 887px tall, but it's inside SidebarProvider which has 8px padding from the inset variant. This pushes the spacer down by 8px, making the total page height 895px instead of 887px.

Layout Debug Info
  Viewport (vh): 887px
  SidebarProvider height: 887px
  SidebarProvider padding: 8px 8px 8px 8px
  SidebarInset height: 871px
  Page scrollable: YES
  Page scrollHeight: 895px
  Tall Element 2: DIV.duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear
  group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180
  group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))] bottom:895px height:887px

System Info

Browser: Chrome Version 138.0.7204.184 (Official Build) (x86_64)
OS: macOS 15.5 (24F74)
Framework: Vue 3.5.13 with Vite
shadcn/ui version: Latest (as of January 2025)
Node: v24.4.0

Before submitting

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