[Bug] Resizable SideNav inside AppShell creates a horizontal scrollbar

[justinberiot]

Description

Enabling resizable on a SideNav inside AppShell creates unwanted horizontal scrolling, even with minimal navigation content and no custom theme.

Expected: The sidebar can be resized without introducing horizontal scrolling.

Actual: At the default sidebar width, its surrounding panel has clientWidth: 260 and scrollWidth: 261. An absolutely positioned element inside the resize handle extends to 260.5px, beyond the panel’s content edge.

This reproduces with both the default AppShell variant and variant="section". Removing resizable eliminates the overflow.

Reproduction

   import "@astryxdesign/core/reset.css";
   import "@astryxdesign/core/astryx.css";

   import { AppShell } from "@astryxdesign/core/AppShell";
   import { SideNav, SideNavItem } from "@astryxdesign/core/SideNav";

   export default function App() {
     return (
       <AppShell
         sideNav={
           <SideNav resizable>
             <SideNavItem label="Home" />
           </SideNav>
         }
       >
         Content
       </AppShell>
     );
   }

1. Render this example at a desktop viewport, such as 1440 × 900.
2. Scroll horizontally over the sidebar.
3. Inspect .astryx-app-shell-sidenav: its scroll width exceeds its client width by 1px.
4. Remove resizable and repeat. The overflow disappears.

Astryx Version

@astryxdesign/core@0.5.4

Environment

• Initially observed on macOS.
• Independently reproduced in Playwright Chromium on Linux.
• Reproduction uses Astryx’s standard CSS, without a custom theme or application-specific styling.