Sidebar useIsMobile doesn't change when slowly

[AuTa]

When I expand the window slowly, the isMobile doesn't change to false.

Add console.log(window.innerWidth, e.matches) get 767 false, but MOBILE_BREAKPOINT is 768, so setIsMobile is true.

Use event.matches or mql.matches or <=?

I find a questions: html - Media query max-width not working inclusively - Stack Overflow. You can see: https://jsfiddle.net/e0hdyqc9/, the 767 is white.

Maybe with max-width when the number is even, media match includes the number; when the number is odd, media match doesn't include the number.

[stefan-karger]

useIsMobile is a direct port of the hook from shadcn:
https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/hooks/use-mobile.tsx

but it's weird that it doesn't trigger at 767 since there is 1px subtracted from the breakpoint width:
window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)

maybe also open an issue at shadcn/ui so it will stay consistent :)

[AuTa]

shadcn-ui/ui#6123