fix(web): clip detached sheet corners on desktop

Author: lodev09

src/TrueSheet.web.tsx

@@ -264,9 +264,16 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       borderBottomLeftRadius: detached ? DEFAULT_CORNER_RADIUS : 0,
       borderBottomRightRadius: detached ? DEFAULT_CORNER_RADIUS : 0,
       backgroundColor: backgroundColor as string,
-      maxWidth: isLandscapeOrTablet ? (maxContentWidth ?? DEFAULT_MAX_WIDTH) : undefined,
-      marginLeft: isLandscapeOrTablet ? (anchor === 'left' ? anchorOffset : 'auto') : undefined,
-      marginRight: isLandscapeOrTablet ? (anchor === 'right' ? anchorOffset : 'auto') : undefined,
+      // When detached on desktop, the clip wrapper already handles horizontal
+      // sizing/anchoring — letting the drawer fill the wrapper keeps its bottom
+      // corners aligned with the wrapper's rounded clip (double-margin would
+      // leave the drawer inset from the wrapper's rounded edge).
+      maxWidth:
+        isLandscapeOrTablet && !detached ? (maxContentWidth ?? DEFAULT_MAX_WIDTH) : undefined,
+      marginLeft:
+        isLandscapeOrTablet && !detached ? (anchor === 'left' ? anchorOffset : 'auto') : undefined,
+      marginRight:
+        isLandscapeOrTablet && !detached ? (anchor === 'right' ? anchorOffset : 'auto') : undefined,
     }),
     [backgroundColor, isLandscapeOrTablet, maxContentWidth, anchor, anchorOffset, detached]
   );
@@ -285,10 +292,30 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       maxWidth: isLandscapeOrTablet ? (maxContentWidth ?? DEFAULT_MAX_WIDTH) : undefined,
       marginLeft: isLandscapeOrTablet ? (anchor === 'left' ? anchorOffset : 'auto') : undefined,
       marginRight: isLandscapeOrTablet ? (anchor === 'right' ? anchorOffset : 'auto') : undefined,
+      // Footer lives outside the drawer's detached clip wrapper, so match its
+      // rounded bottom here instead of inheriting it.
+      borderBottomLeftRadius: detached ? DEFAULT_CORNER_RADIUS : undefined,
+      borderBottomRightRadius: detached ? DEFAULT_CORNER_RADIUS : undefined,
+      overflow: detached ? 'hidden' : undefined,
     }),
     [isLandscapeOrTablet, maxContentWidth, anchor, anchorOffset, detached, detachedOffset]
   );
 
+  // On desktop the drawer is narrower than the viewport, so the clip wrapper's
+  // rounded bottom must match the drawer's horizontal bounds — otherwise its
+  // corners sit at the far viewport edges and the drawer appears flat-bottomed.
+  const detachedWrapperStyle = useMemo<React.CSSProperties | undefined>(
+    () =>
+      detached && isLandscapeOrTablet
+        ? {
+            maxWidth: maxContentWidth ?? DEFAULT_MAX_WIDTH,
+            marginLeft: anchor === 'left' ? anchorOffset : 'auto',
+            marginRight: anchor === 'right' ? anchorOffset : 'auto',
+          }
+        : undefined,
+    [detached, isLandscapeOrTablet, maxContentWidth, anchor, anchorOffset]
+  );
+
   const handleStyle = useMemo<React.CSSProperties>(
     () => ({
       height: grabberHeight,
@@ -313,6 +340,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       detached={detached}
       detachedOffset={detachedOffset}
       detachedRadius={DEFAULT_CORNER_RADIUS}
+      detachedWrapperStyle={detachedWrapperStyle}
       activeSnapPoint={activeSnapPoint}
       setActiveSnapPoint={handleSetActiveSnapPoint}
       {...snapPointsProps}

src/web/vaul/context.ts

@@ -38,6 +38,7 @@ interface DrawerContextValue {
   detached: boolean;
   detachedOffset: number;
   detachedRadius: number;
+  detachedWrapperStyle?: React.CSSProperties;
 }
 
 export const DrawerContext = React.createContext<DrawerContextValue>({

src/web/vaul/index.tsx

@@ -161,6 +161,12 @@ export type DialogProps = {
    * @default 0
    */
   detachedRadius?: number;
+  /**
+   * Extra styles merged into the detached clip wrapper. Use this to match the
+   * wrapper's horizontal bounds to the drawer's on desktop (e.g. `maxWidth` +
+   * auto margins) so its rounded-bottom clip aligns with the drawer.
+   */
+  detachedWrapperStyle?: React.CSSProperties;
 } & (WithFadeFromProps | WithoutFadeFromProps);
 
 export function Root({
@@ -197,6 +203,7 @@ export function Root({
   detached = false,
   detachedOffset = 0,
   detachedRadius = 0,
+  detachedWrapperStyle,
 }: DialogProps) {
   const [isOpen = false, setIsOpen] = useControllableState({
     defaultProp: defaultOpen,
@@ -891,6 +898,7 @@ export function Root({
           detached,
           detachedOffset: detached ? detachedOffset : 0,
           detachedRadius: detached ? detachedRadius : 0,
+          detachedWrapperStyle: detached ? detachedWrapperStyle : undefined,
         }}
       >
         {children}
@@ -993,6 +1001,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
     detached,
     detachedOffset,
     detachedRadius,
+    detachedWrapperStyle: detachedWrapperStyleProp,
   } = useDrawerContext();
   const hasAutoSnapPoint = React.useMemo(
     () => !!snapPoints?.some((p) => p === 'auto'),
@@ -1191,9 +1200,10 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
             pointerEvents: 'none',
             borderBottomLeftRadius: detachedRadius,
             borderBottomRightRadius: detachedRadius,
+            ...detachedWrapperStyleProp,
           }
         : null,
-    [detached, detachedOffset, detachedRadius]
+    [detached, detachedOffset, detachedRadius, detachedWrapperStyleProp]
   );
 
   const contentNode = (