fix modal so it always appears over mobile header and fix dropzone width

Author: LFDanLu

packages/dev/s2-docs/pages/s2/DropZone.mdx

@@ -19,13 +19,13 @@ function Example(props) {
   return (
     <DropZone
       {...props}
-      styles={style({width: 320})}
+      styles={style({width: 320, maxWidth: '90%'})}
       /* PROPS */
       isFilled={!!content}
       // Determine whether dragged content should be accepted.
       getDropOperation={types => (
         ['text/plain', 'image/jpeg', 'image/png', 'image/gif'].some(t => types.has(t))
-          ? 'copy' 
+          ? 'copy'
           : 'cancel'
       )}
       onDrop={async (event) => {

packages/dev/s2-docs/src/Layout.tsx

@@ -125,7 +125,7 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
             currentPage={currentPage} />
           <div className={style({display: 'flex', width: 'full'})}>
             <Nav pages={pages} currentPage={currentPage} />
-            <main 
+            <main
               key={currentPage.url}
               style={{borderBottomLeftRadius: 0, borderBottomRightRadius: 0}}
               className={style({

packages/dev/s2-docs/src/MobileHeader.tsx

@@ -124,7 +124,7 @@ export function MobileHeader({toc, pages, currentPage}) {
           flexGrow: 1
         })}>
         <AdobeLogo />
-        <h2 
+        <h2
           className={style({
             font: 'heading-sm',
             marginY: 0,