@goplusvn/core 0.1.83 → 0.1.85

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+## 0.1.85 — Hộp thoại: gỡ bẫy class `sm:` khiến trang không ghi đè được
+
+Sửa lỗi giao diện do 0.1.84 gây ra. `DialogContent` đổi mặc định thành
+`p-4 sm:p-6` và `sm:max-w-lg`; `cn()` là `twMerge` mà twMerge **chỉ khử xung đột
+trong cùng một variant**, nên `sm:p-6` / `sm:max-w-lg` sống sót khi trang truyền
+`p-0` / `max-w-2xl`, rồi thắng ở ≥640px vì nằm trong media query.
+
+Hậu quả trên app đã nâng (thingtodo): mọi hộp thoại CRUD bị bóp từ 672px xuống
+512px, cộng thêm 24px padding thừa nên đường kẻ header/footer thụt vào không
+chạm mép, và nút X mặc định của Radix lộ ra (trước đó bị header sticky che).
+
+**Đổi**
+
+- `ui/primitives/dialog.tsx` — `p-4 sm:p-6` → `p-6`; `sm:max-w-lg` → `max-w-lg`;
+  bỏ `max-w-[calc(100%-2rem)]` thừa. Giữ nguyên phần chống tràn của 0.1.84
+  (`max-h-[calc(100dvh-2rem)]`, `overscroll-contain`, `w-[calc(100%-2rem)] sm:w-full`)
+  vì chúng không xung đột với class trang truyền vào.
+- `ui/feedback/index.tsx` — `AlertDialogContent` dính đúng bẫy đó, sửa y hệt.
+  LƯU Ý cho app đang dùng: hộp thoại khai `max-w-sm` / `max-w-md` **không**
+  prefix từ nay hẹp đúng như đã khai, thay vì bị `sm:max-w-lg` kéo lên 512px.
+- `crud/components/crud-dialog.tsx` — `formWidth` từng nội suy
+  `` max-w-${...} ``: Tailwind quét class TĨNH nên class đó không bao giờ được
+  sinh ra. Thay bằng bảng ánh xạ tĩnh. Thêm `w-full` (tràn viền trên điện thoại,
+  đi cùng `h-[100vh] rounded-none`) và ẩn tường minh nút X bằng
+  `[&>button.absolute]:hidden` — trước đây nó chỉ *vô tình* bị header che.
+  Đóng bằng "Huỷ" hoặc Esc; footer sticky nên "Huỷ" luôn thấy.
+- `crud/components/crud-detail-dialog.tsx` — thêm `w-full` cho nhất quán.
+
+**Quy tắc rút ra**: class mặc định trong primitive mà trang có thể muốn ghi đè
+thì PHẢI để dạng không prefix. Muốn khác nhau theo bề rộng màn hình thì đặt ở
+phía trang, đừng đặt ở mặc định.
+
+Đã dựng thật với `core:link`: vinhhoa (từ 0.1.78) và tanloc-spartronics
+(từ 0.1.83) `type-check` + `next build` đều xanh; không mất API công khai, không
+đòi cột/bảng DB mới.
+
 # Changelog
 
 ## 0.1.81 — Cây workspace kiểu explorer, xoá/khôi phục lộ ra, thêm thành viên bằng dialog

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@goplusvn/core",
   "description": "GoPlusVN Platform Kit - ERP kernel: layout, RBAC, CRUD, multi-tenant, system pages",
-  "version": "0.1.83",
+  "version": "0.1.85",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -110,6 +110,7 @@
     "next": ">=14.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
+    "sonner": "^2.0.0",
     "vitest": ">=2"
   },
   "devDependencies": {
@@ -134,6 +135,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "16.5.0",
     "jsdom": "^27.2.0",
+    "sonner": "2.0.2",
     "tsup": "^8.5.1",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.50.1",
@@ -206,7 +208,6 @@
     "react-use": "17.5.1",
     "recharts": "^2.15.1",
     "shiki": "3.2.1",
-    "sonner": "2.0.2",
     "swr": "^2.3.6",
     "tailwind-merge": "2.5.2",
     "vaul": "1.1.2",

package/src/crud/components/crud-detail-dialog.tsx

@@ -269,7 +269,7 @@ export function CrudDetailDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange} modal={true}>
-      <DialogContent className="max-w-2xl max-h-[90vh] sm:max-h-[90vh] h-[100vh] sm:h-auto rounded-none sm:rounded-lg overflow-hidden flex flex-col p-0 gap-0">
+      <DialogContent className="w-full max-w-2xl max-h-[90vh] sm:max-h-[90vh] h-[100vh] sm:h-auto rounded-none sm:rounded-lg overflow-hidden flex flex-col p-0 gap-0">
         {/* Header */}
         <DialogHeader className="bg-background border-b px-4 sm:px-6 pt-4 sm:pt-6 pb-3 sm:pb-4 text-left space-y-0 shrink-0">
           <div className="flex items-center gap-2 sm:gap-3 min-w-0">

package/src/crud/components/crud-dialog.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { CheckCircle2, Loader2 } from "lucide-react";
+import { cn } from "../../utils";
 
 import type { EntityConfig } from "../../types";
 
@@ -16,6 +17,22 @@ import { DynamicIcon } from "../../ui";
 import { CrudForm } from "./crud-form";
 import { useCrudConfig } from "./crud-context";
 
+// Tailwind quét class TĨNH — `max-w-${...}` sẽ KHÔNG được sinh ra, hộp thoại
+// mất luôn giới hạn bề rộng. Phải liệt kê nguyên chuỗi.
+const FORM_WIDTH_CLASS: Record<
+  NonNullable<EntityConfig["formWidth"]>,
+  string
+> = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+};
+
 interface CrudDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -192,7 +209,16 @@ export function CrudDialog({
   return (
     <Dialog open={open} onOpenChange={onOpenChange} modal={true}>
       <DialogContent
-        className="max-w-2xl max-h-[90vh] sm:max-h-[90vh] h-[100vh] sm:h-auto rounded-none sm:rounded-lg overflow-hidden flex flex-col p-0"
+        className={cn(
+          // `w-full` là CỐ Ý: ghi đè mặc định `w-[calc(100%-2rem)]` của
+          // DialogContent để hộp thoại tràn viền trên điện thoại (đi cùng
+          // h-[100vh] + rounded-none), desktop vẫn bị max-w-* chặn lại.
+          "w-full max-h-[90vh] sm:max-h-[90vh] h-[100vh] sm:h-auto rounded-none sm:rounded-lg overflow-hidden flex flex-col p-0",
+          // Header dính (sticky z-10, nền đục) che mất nút X mặc định của
+          // Radix — ẩn hẳn cho tường minh. Đóng bằng "Huỷ" hoặc Esc.
+          "[&>button.absolute]:hidden",
+          FORM_WIDTH_CLASS[config.formWidth ?? "2xl"],
+        )}
         onInteractOutside={(e) => {
           // Prevent closing dialog when submitting or clicking on Popover
           if (isSubmitting || showSuccess) {

package/src/crud/components/crud-field-renderer.tsx

@@ -484,9 +484,9 @@ export function CrudFieldRenderer({
           name={field.name}
           render={({ field: formField }) => (
             <FormItem>
-              {field.label && <FormLabel>{field.label}</FormLabel>}
+              {field.label && <FormLabel className="font-semibold">{field.label}</FormLabel>}
               <FormControl>
-                <div className="flex items-center gap-2 pt-2">
+                <div className="flex items-center h-10">
                   <Switch
                     checked={
                       field.type === "switch"

package/src/crud/components/crud-table.tsx

@@ -46,10 +46,18 @@ function resolveIncludedRelationLabel(
   row: Record<string, unknown> | undefined,
 ): string | undefined {
   const name = field?.name;
-  if (!field?.dataSource || !row || !name || !name.endsWith("Id")) {
+  if (!field?.dataSource || !row || !name) {
     return undefined;
   }
-  const relationKey = name.slice(0, -2);
+  let relationKey = "";
+  if (name.endsWith("Id")) {
+    relationKey = name.slice(0, -2);
+  } else if (name.endsWith("_id")) {
+    relationKey = name.slice(0, -3);
+  } else {
+    return undefined;
+  }
+
   if (!relationKey) return undefined;
   const rel = row[relationKey];
   if (!rel || typeof rel !== "object" || Array.isArray(rel)) return undefined;

package/src/hooks/index.tsx

@@ -147,6 +147,25 @@ export function useMobile(): boolean {
   return useMediaQuery("(max-width: 768px)");
 }
 
+/**
+ * Mốc "màn hình hẹp" RIÊNG cho sidebar — cố ý KHÁC `useMobile()`.
+ *
+ * Sidebar desktop hiện từ `lg:` (≥1024px). Nếu hook quyết định off-canvas lại
+ * dùng mốc 768px thì sinh ra hai lỗi:
+ *   1. Vùng chết 769–1023px (iPad dọc 820, iPad Pro 11" 834, Surface 912):
+ *      sidebar desktop đã render nhưng KHÔNG nút nào thu gọn được nó — nút
+ *      `SidebarTrigger` là `lg:` còn `ToggleMobileSidebar` chỉ hiện khi hẹp.
+ *      Sidebar 16rem ăn cứng 256px của một màn ~800px.
+ *   2. Đúng 768px (iPad Mini dọc) thì `max-width:768px` VÀ `min-width:768px`
+ *      cùng đúng ⇒ Sheet mobile và sidebar desktop mount CÙNG LÚC, đè lên nhau.
+ *
+ * Dùng 1023.98px để khớp đúng biên `lg:` của Tailwind và tránh off-by-one.
+ * `useMobile()` giữ nguyên 768px — đã là API công khai, app khác đang dựa vào.
+ */
+export function useSidebarMobile(): boolean {
+  return useMediaQuery("(max-width: 1023.98px)");
+}
+
 // ============================================================================
 // Clipboard Hook
 // ============================================================================

package/src/types/index.ts

@@ -336,6 +336,7 @@ export interface EntityConfig {
   codeGeneration?: CodeGenerationConfig;
   formSections?: FormSection[];
   formMode?: FormModeConfig;
+  formWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
   rowActions?: RowAction[];
   include?: string[];
 }

package/src/ui/feedback/index.tsx

@@ -89,7 +89,13 @@ export function AlertDialogContent({
       <AlertDialogPrimitive.Content
         data-slot="alert-dialog-content"
         className={cn(
-          "fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%-2rem)] grid bg-background translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 w-[calc(100%_-_2rem)] sm:w-full grid bg-background translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 max-w-lg",
+          // KHÔNG để `sm:p-6` / `sm:max-w-lg` làm mặc định: twMerge chỉ khử xung
+          // đột trong cùng variant, nên trang truyền `p-0` / `max-w-sm` sẽ bị
+          // class `sm:` đè ngược ở ≥640px (đúng lỗi 0.1.84 của DialogContent).
+          // Cùng lý do với DialogContent: bị neo giữa màn hình nên phải chặn
+          // chiều cao, không thì mô tả dài sẽ tràn ra ngoài và không cuộn được.
+          "max-h-[calc(100dvh_-_2rem)] overflow-y-auto overscroll-contain",
           className,
         )}
         {...props}

package/src/ui/feedback/sonner.tsx

@@ -1,5 +1,18 @@
 "use client";
 
+/**
+ * `sonner` là PEER dependency của core, cố ý — không phải `dependencies`.
+ *
+ * `toast()` đẩy vào một store cấp module, còn `<Toaster>` đọc chính store đó.
+ * Nếu core tự mang theo bản sonner riêng thì app và core có thể nạp HAI bản
+ * khác nhau ⇒ hai store ⇒ `toast()` gọi bên app không bao giờ tới `<Toaster>`
+ * dựng bởi core: không nổ lỗi, chỉ im lặng không hiện gì. Đúng cảnh đã gặp khi
+ * consumer chạy `pnpm core:link` (checkout core mang node_modules riêng).
+ *
+ * Để peer thì bản sonner LUÔN là bản của app — một store duy nhất, kể cả khi
+ * link. Cả ba app đang dùng (vinhhoa, thingtodo, tanloc-spartronics) đều đã tự
+ * khai `sonner` trong dependencies nên đây là thay đổi không phá vỡ ai.
+ */
 import { Toaster as Sonner } from "sonner";
 
 import type { ComponentProps } from "react";

package/src/ui/layout/page-tabs.tsx

@@ -167,7 +167,17 @@ export function PageTabs({
 
   return (
     <div className={cn("w-full", variant === "header" && "py-0", className)}>
-      <ScrollArea className={cn("w-full", variant === "header" && "h-8")}>
+      {/* orientation="horizontal": ScrollBar mặc định là "vertical" nên dải tab
+          cuộn được bằng cảm ứng nhưng trên desktop KHÔNG có thanh cuộn nào —
+          người dùng tưởng các tab bị cắt mất. Bar bóp còn 6px để không đè
+          lên chữ trong biến thể header cao 32px. */}
+      <ScrollArea
+        orientation="horizontal"
+        className={cn(
+          "w-full [&_[data-slot=scroll-area-scrollbar]]:h-1.5",
+          variant === "header" && "h-8",
+        )}
+      >
         <div
           className={cn(
             "flex items-end gap-0 px-2 py-0.5",

package/src/ui/layout/user-dropdown.tsx

@@ -26,12 +26,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "../primitives/dropdown-menu";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "../primitives/client";
 
 interface ExtendedUser {
   id: string;
@@ -86,34 +80,26 @@ export function UserDropdown({
 
   return (
     <DropdownMenu>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="rounded-full bg-primary border-primary hover:bg-primary/90 focus-visible:ring-0 focus-visible:ring-offset-0"
-                aria-label="User"
-              >
-                <Avatar className="size-6">
-                  <AvatarImage
-                    src={user?.avatar || undefined}
-                    alt={user?.name || ""}
-                    className="object-cover"
-                  />
-                  <AvatarFallback className="bg-primary text-white text-[10px] font-bold uppercase">
-                    {user?.name && getInitials(user.name)}
-                  </AvatarFallback>
-                </Avatar>
-              </Button>
-            </DropdownMenuTrigger>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Profile</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          className="rounded-full bg-primary border-primary hover:bg-primary/90 focus-visible:ring-0 focus-visible:ring-offset-0"
+          aria-label="User"
+          title="Profile"
+        >
+          <Avatar className="size-6">
+            <AvatarImage
+              src={user?.avatar || undefined}
+              alt={user?.name || ""}
+              className="object-cover"
+            />
+            <AvatarFallback className="bg-primary text-white text-[10px] font-bold uppercase">
+              {user?.name && getInitials(user.name)}
+            </AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
 
       <DropdownMenuContent
         className="w-56 p-1 bg-background/80 backdrop-blur-xl border border-border/40 shadow-xl rounded-xl animate-in fade-in zoom-in-95 duration-200"

package/src/ui/layout/vertical-layout-header.tsx

@@ -28,7 +28,11 @@ export function VerticalLayoutHeader({
 
   return (
     <header className="sticky top-0 z-50 w-full bg-background/95 border-b border-border/50 backdrop-blur supports-[backdrop-filter]:bg-background/80">
-      <div className="container flex h-11 justify-between items-center gap-0">
+      {/* KHÔNG dùng `container`: max-width của nó bám theo VIEWPORT, không theo
+          phần tử cha. Cha ở đây là SidebarInset = viewport − bề rộng sidebar, và
+          SidebarInset có `overflow-hidden`, nên ở 768–1024px hàng này rộng hơn
+          cha và cụm nút bên phải (chuông, customizer, user) bị cắt mất. */}
+      <div className="flex w-full h-11 justify-between items-center gap-1 px-2 sm:px-3">
         {/* Left: sidebar toggles */}
         <div className="flex items-center gap-2 flex-shrink-0">
           <ToggleMobileSidebar />
@@ -46,9 +50,12 @@ export function VerticalLayoutHeader({
 
         {/* Right: user actions */}
         <div className="flex items-center gap-2 flex-shrink-0">
-          <div className="hidden sm:flex items-center gap-2">
+          <div className="flex items-center gap-1 sm:gap-2">
             {notificationSlot ?? <NotificationDropdown dictionary={dictionary} />}
-            <FullScreenToggle />
+            {/* Toàn màn hình vô nghĩa trên thiết bị cảm ứng — ẩn dưới lg. */}
+            <span className="hidden lg:inline-flex">
+              <FullScreenToggle />
+            </span>
           </div>
           <Customizer
             trigger={

package/src/ui/layout/vertical-layout.tsx

@@ -37,12 +37,15 @@ export function VerticalLayout({
         searchResults={searchResults}
         searchLoading={searchLoading}
       />
-      <SidebarInset className="w-full min-w-0 overflow-hidden h-screen flex flex-col">
+      <SidebarInset className="w-full min-w-0 overflow-hidden h-dvh flex flex-col">
         <VerticalLayoutHeader
           dictionary={dictionary}
           notificationSlot={notificationSlot}
         />
-        <main className="w-full mx-auto flex-1 min-h-0 px-4 md:px-8 py-4 overflow-auto">
+        {/* `h-dvh` ở SidebarInset (không phải `h-screen`): trên Safari/Chrome
+            mobile 100vh tính CẢ thanh URL co giãn, nên đáy trang — phân trang,
+            footer, nút Lưu — nằm khuất dưới thanh trình duyệt. */}
+        <main className="w-full mx-auto flex-1 min-h-0 px-3 sm:px-4 md:px-6 xl:px-8 py-3 md:py-4 overflow-auto">
           {children}
         </main>
         <Footer />

package/src/ui/primitives/dialog.tsx

@@ -40,7 +40,20 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+        // Hộp thoại bị neo `top-1/2 -translate-y-1/2`, nên nếu KHÔNG chặn chiều
+        // cao thì nội dung cao hơn màn hình sẽ tràn ra CẢ trên lẫn dưới và
+        // không cuộn được — hỏng trên điện thoại và trên tablet xoay ngang.
+        // Đây là mặc định: trang nào tự khai `max-h-*` / `overflow-*` thì
+        // class của trang đứng sau trong cn() nên vẫn thắng.
+        "max-h-[calc(100dvh_-_2rem)] overflow-y-auto overscroll-contain",
+        // Bề rộng: chừa 1rem mỗi bên trên màn hẹp thay vì dán sát mép.
+        // CẢNH BÁO (đã dính 0.1.84): mọi class mặc định ở đây mà trang có thể
+        // muốn ghi đè PHẢI để dạng KHÔNG prefix. `cn()` = twMerge chỉ khử xung
+        // đột trong CÙNG một variant — `sm:max-w-lg`/`sm:p-6` sẽ SỐNG SÓT khi
+        // trang truyền `max-w-2xl`/`p-0`, rồi thắng ở ≥640px vì nằm trong media
+        // query. Đó chính là lỗi bóp CrudDialog còn 512px + padding kép.
+        "w-[calc(100%_-_2rem)] sm:w-full max-w-lg",
         className,
       )}
       {...props}

package/src/ui/primitives/sidebar.tsx

@@ -6,7 +6,7 @@ import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
 import { PanelLeft } from "lucide-react";
 
-import { useMobile } from "../../hooks"; // Exported from core/hooks
+import { useSidebarMobile } from "../../hooks"; // Exported from core/hooks
 import { cn } from "../../utils";
 import { Button } from "./button";
 import { Sheet, SheetContent, SheetTitle } from "../feedback";
@@ -69,7 +69,10 @@ const SidebarProvider = React.forwardRef<
     },
     ref,
   ) => {
-    const isMobile = useMobile();
+    // Mốc sidebar là 1023.98px (khớp `lg:`), KHÔNG phải `useMobile()` 768px —
+    // xem chú thích ở useSidebarMobile: 768px để hở vùng chết tablet 769–1023px
+    // và làm hai sidebar cùng mount tại đúng 768px.
+    const isMobile = useSidebarMobile();
     const [openMobile, setOpenMobile] = React.useState(false);
     // Hover expand state
     const [hoverOpen, setHoverOpen] = React.useState(false);
@@ -266,7 +269,7 @@ const Sidebar = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "group peer hidden md:block transition-colors duration-200",
+          "group peer hidden lg:block transition-colors duration-200",
           // Blue bg + white text when collapsed, white bg + dark text when expanded/hover
           state === "collapsed" && !isHoverExpanded
             ? "text-sidebar-foreground"
@@ -294,7 +297,7 @@ const Sidebar = React.forwardRef<
         {/* Sidebar Content - expands on hover */}
         <div
           className={cn(
-            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] ease-linear md:flex",
+            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] ease-linear lg:flex",
             side === "left"
               ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
               : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
@@ -402,14 +405,14 @@ const SidebarInset = React.forwardRef<
         // Inset: content is a card floating with a uniform m-2 gap on ALL sides
         // (no ml-0 override) so there's a small gap between the sidebar and the
         // content/header instead of them touching.
-        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] lg:peer-data-[variant=inset]:m-2 lg:peer-data-[variant=inset]:rounded-xl lg:peer-data-[variant=inset]:shadow",
         // Floating: the content is full-bleed (no card), and its LEFT edge is
         // the side that meets the floating sidebar. Give it a small left gap
         // (ml-2) so it doesn't touch the sidebar, and round both left corners
         // (top-left clips the sticky header, bottom-left clips the footer via
         // overflow-hidden) so the content hugs the floating sidebar with soft
         // curves instead of hard 90° corners. Right edge stays flush.
-        "md:peer-data-[variant=floating]:ml-2 md:peer-data-[variant=floating]:rounded-l-xl",
+        "lg:peer-data-[variant=floating]:ml-2 lg:peer-data-[variant=floating]:rounded-l-xl",
         className,
       )}
       {...props}