AppLayout: breakpoints include the edge pixel and use px; aside trigger hidden and sheet mis-sized with asideMobile="sheet"

Versions: @heroui-pro/react 1.0.0-beta.10 (latest), @heroui/react 3.2.6, tailwindcss 4.3.3, Chromium on macOS.

1. Breakpoints include the edge pixel and use px

AppLayout and Sidebar switch layouts with max-width: 768px and max-width: 1024px, in the compiled CSS (app-layout.css, sidebar.css) and in matchMedia (app-layout.js, sidebar.js).

max-width: 768px includes 768px, but Tailwind's md starts at 768px (width >= 48rem). So at exactly 768px AppLayout shows the mobile layout while md: classes already apply. The same happens at 1024px with lg. The docs say "hidden below 1024px" and "visible below the md breakpoint", and number-stepper, context-menu and drop-zone already use 48rem and 64rem.

The unit also differs. Tailwind breakpoints use rem, so they move when the user changes the browser's default font size. With Chrome's "Large" font (20px), md is 960px and lg is 1280px, but AppLayout still switches at 768px and 1024px.

768px and 1024px are common iPad widths, so our designs and AppLayout show different layouts on real devices.

Could AppLayout and Sidebar use (width < 48rem) and (width < 64rem) in both the CSS and matchMedia? A way to configure the breakpoints (reading --breakpoint-md and --breakpoint-lg, or a prop for the media query) would also work for us.

The open-source Toast had the same pattern; it was fixed in heroui-inc/heroui#6932 (from #6933) and ships in @heroui/react 3.2.7.

2. The aside trigger is hidden in sheet mode

.app-layout__aside-trigger is hidden at 1024px and below. The docs say the sheet is toggled by the same AppLayout.AsideTrigger, so with asideMobile="sheet" there is no way to open the sheet. Could the trigger stay visible when asideMobile is "sheet"? The context already has hasMobileAside.

3. The aside sheet is wider and rounder than intended

.app-layout__mobile-aside-sheet sets max-width: min(360px, 88vw), but .sheet__content--right (96vw, rounded start corners) comes later with the same specificity and wins. On a 390px screen the sheet is 374px wide and rounded instead of 343px. The sidebar sheet already uses a more specific selector for this. Could the aside sheet do the same?

4. Related: one open state for the aside column and its sheet

The column and the sheet share isAsideOpen, and defaultAsideOpen is true. So in sheet mode the sheet covers the page on every load on small screens, and opens whenever the window shrinks below 1024px. We work around it with a controlled asideOpen that keeps a separate, closed-by-default state below 1024px. A separate default for the sheet would help.

Our workaround CSS for 2 and 3, in case it helps:

@media (max-width: 1024px) {
 .app-layout__aside-trigger { display: inline-flex; }
}
.app-layout__mobile-aside-sheet.sheet__content--right {
 max-width: min(360px, 88vw);
 border-radius: 0;
}
.app-layout__mobile-aside-dialog.sheet__dialog--right { border-radius: 0; }

Thank you!