Collapse sidebar one breakpoint earlier at xl instead of lg

Author: tjementum

application/shared-webapp/ui/components/Sidebar.tsx

@@ -128,8 +128,8 @@ function SidebarProvider({
     if (typeof window === "undefined") {
       return persistedOpenRef.current;
     }
-    // On initial load below `lg`, force-collapsed regardless of stored preference.
-    return window.matchMedia(MEDIA_QUERIES.lg).matches ? persistedOpenRef.current : false;
+    // On initial load below `xl`, force-collapsed regardless of stored preference.
+    return window.matchMedia(MEDIA_QUERIES.xl).matches ? persistedOpenRef.current : false;
   });
   const open = openProp ?? internalOpen;
   const setOpen = React.useCallback(
@@ -140,9 +140,9 @@ function SidebarProvider({
       } else {
         setInternalOpen(openState);
       }
-      // Only persist user choices made at `lg+`. Toggles below `lg` are overlay-mode
+      // Only persist user choices made at `xl+`. Toggles below `xl` are overlay-mode
       // interactions — transient, never written to localStorage.
-      if (typeof window !== "undefined" && window.matchMedia(MEDIA_QUERIES.lg).matches) {
+      if (typeof window !== "undefined" && window.matchMedia(MEDIA_QUERIES.xl).matches) {
         persistedOpenRef.current = openState;
         localStorage.setItem(SIDEBAR_STORAGE_KEY_COLLAPSED, String(!openState));
       }
@@ -175,14 +175,14 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
 
-  // Auto-collapse when the viewport drops below `lg`, restore user preference when it grows back.
-  // Below `lg` the sidebar overlays content (rarely desirable on narrow screens). Transitions
+  // Auto-collapse when the viewport drops below `xl`, restore user preference when it grows back.
+  // Below `xl` the sidebar overlays content (rarely desirable on narrow screens). Transitions
   // use setInternalOpen directly so they do NOT touch the persisted preference.
   React.useEffect(() => {
     if (typeof window === "undefined") {
       return;
     }
-    const mediaQuery = window.matchMedia(MEDIA_QUERIES.lg);
+    const mediaQuery = window.matchMedia(MEDIA_QUERIES.xl);
     const handleChange = (event: MediaQueryListEvent) => {
       setInternalOpen(event.matches ? persistedOpenRef.current : false);
     };
@@ -351,28 +351,28 @@ function Sidebar({
       data-side={side}
       data-slot="sidebar"
     >
-      {/* Backdrop: dims content behind the expanded sidebar in overlay mode (below `lg`).
-          Hidden at `lg+` where the sidebar pushes content instead of overlaying. Click to collapse.
+      {/* Backdrop: dims content behind the expanded sidebar in overlay mode (below `xl`).
+          Hidden at `xl+` where the sidebar pushes content instead of overlaying. Click to collapse.
           Starts below any banner strip so banners (which push all top-positioned UI down) stay visible. */}
       <button
         type="button"
         aria-label={t`Close sidebar`}
         tabIndex={-1}
         onClick={() => setOpen(false)}
         className={cn(
-          "pointer-events-none fixed top-(--banner-offset,0rem) right-0 bottom-0 left-0 z-[35] bg-black/50 opacity-0 transition-opacity duration-100 ease-linear lg:hidden",
+          "pointer-events-none fixed top-(--banner-offset,0rem) right-0 bottom-0 left-0 z-[35] bg-black/50 opacity-0 transition-opacity duration-100 ease-linear xl:hidden",
           "group-data-[state=expanded]:pointer-events-auto group-data-[state=expanded]:opacity-100"
         )}
       />
       {/* Placeholder width:
-          - Below `lg`: stays at icon-rail width so the expanded sidebar OVERLAYS content.
-          - At `lg`+: follows sidebar width so main content pushes right (no overlay).
+          - Below `xl`: stays at icon-rail width so the expanded sidebar OVERLAYS content.
+          - At `xl`+: follows sidebar width so main content pushes right (no overlay).
           Transitions disabled during drag via `[data-resizing]` on the wrapper. */}
       <div
         data-slot="sidebar-gap"
         className={cn(
           "relative w-(--sidebar-width-icon) bg-transparent transition-[width] duration-100 ease-linear",
-          "lg:w-(--sidebar-width) lg:group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+          "xl:w-(--sidebar-width) xl:group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
           "group-data-[collapsible=offcanvas]:w-0",
           "group-data-[side=right]:rotate-180",
           "group-data-[resizing=true]/sidebar-wrapper:transition-none"