Drawer: Prevent close button protruding in left position (#1351)

.changeset/chilly-mugs-tickle.md

@@ -0,0 +1,13 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - Drawer
+---
+
+**Drawer:** Prevent close button protruding in left position
+
+Fixes an issue where the close button could protrude from a `Drawer`.
+This was only visible when setting `position` to `left` and between a small range of screen widths — above 660px (`small` content width) and below 768px (`tablet` breakpoint).

packages/braid-design-system/src/lib/components/Dialog/Dialog.screenshots.tsx

@@ -4,6 +4,7 @@ import { Inline, Stack, Box } from '../';
 import { Placeholder } from '../../playroom/components';
 import { DialogContent } from './Dialog';
 import * as styles from '../private/Modal/Modal.css';
+import { externalGutter } from '../private/Modal/ModalExternalGutter';
 
 const Container = ({ children }: { children: ReactNode }) => (
   <Box position="relative">
@@ -16,7 +17,7 @@ const Container = ({ children }: { children: ReactNode }) => (
       width="full"
       className={styles.backdrop}
     />
-    <Box position="relative" zIndex="modal">
+    <Box position="relative" zIndex="modal" padding={externalGutter}>
       {children}
     </Box>
   </Box>

packages/braid-design-system/src/lib/components/private/Modal/ModalContent.tsx

@@ -115,6 +115,7 @@ export const ModalContent = ({
   const justifyContent = (
     { left: 'flexStart', center: 'center', right: 'flexEnd' } as const
   )[position];
+  const modalRadius = position === 'center' ? 'xlarge' : undefined;
 
   return (
     <Box
@@ -139,17 +140,19 @@ export const ModalContent = ({
         height={
           position === 'right' || position === 'left' ? 'full' : undefined
         }
+        overflow={position !== 'center' ? 'hidden' : undefined}
+        boxShadow="large"
+        borderRadius={modalRadius}
         width={width !== 'content' ? 'full' : undefined}
         maxWidth={width !== 'content' ? width : undefined}
       >
         {/* modalRef gets forwarded down to UL by RemoveScroll by `forwardProps` */}
         <RemoveScroll ref={modalRef} forwardProps enabled={scrollLock}>
           <Box
             background="surface"
-            borderRadius={position === 'center' ? 'xlarge' : undefined}
+            borderRadius={modalRadius}
             overflow="auto"
             position="relative"
-            boxShadow="large"
             width={width !== 'content' ? 'full' : undefined}
             height={
               position === 'right' || position === 'left' ? 'full' : undefined