fix(desk): use correct dialog positioning at smaller breakpoints (#4894)

Co-authored-by: Nina Andal Aarvik <nina@sanity.io>
sanity-io · Sep 8, 2023 · e62906f · e62906f · vercel · Sep 8, 2023
1 parent 7e9e48f
commit e62906f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/packages/sanity/src/desk/components/deskTool/DeskTool.tsx b/packages/sanity/src/desk/components/deskTool/DeskTool.tsx
@@ -1,4 +1,4 @@
-import {PortalProvider, useToast} from '@sanity/ui'
+import {PortalProvider, useTheme, useToast} from '@sanity/ui'
 import React, {memo, Fragment, useState, useEffect, useCallback} from 'react'
 import styled from 'styled-components'
 import isHotkey from 'is-hotkey'
@@ -38,6 +38,9 @@ export const DeskTool = memo(function DeskTool({onPaneChange}: DeskToolProps) {
   const isResolvingIntent = useRouterState(
     useCallback((routerState) => typeof routerState.intent === 'string', []),
   )
+  const {
+    sanity: {media},
+  } = useTheme()
 
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
 
@@ -84,7 +87,7 @@ export const DeskTool = memo(function DeskTool({onPaneChange}: DeskToolProps) {
       <StyledPaneLayout
         flex={1}
         height={layoutCollapsed ? undefined : 'fill'}
-        minWidth={512}
+        minWidth={media[1]}
         onCollapse={handleRootCollapse}
         onExpand={handleRootExpand}
       >

diff --git a/packages/sanity/src/desk/components/pane/__workshop__/ChangeConnectorsStory.tsx b/packages/sanity/src/desk/components/pane/__workshop__/ChangeConnectorsStory.tsx
@@ -14,6 +14,7 @@ import {
   Stack,
   Text,
   TextInput,
+  useTheme,
 } from '@sanity/ui'
 import {useAction} from '@sanity/ui-workshop'
 import React, {useCallback, useState} from 'react'
@@ -60,6 +61,10 @@ export default function ChangeConnectorsStory() {
   const handleLayoutCollapse = useAction('PaneLayout.onCollapse')
   const handleLayoutExpand = useAction('PaneLayout.onExpand')
 
+  const {
+    sanity: {media},
+  } = useTheme()
+
   return (
     <LayerProvider>
       <Card height="fill" tone="transparent">
@@ -72,7 +77,7 @@ export default function ChangeConnectorsStory() {
             >
               <PaneLayout
                 height="fill"
-                minWidth={512}
+                minWidth={media[1]}
                 onCollapse={handleLayoutCollapse}
                 onExpand={handleLayoutExpand}
               >

diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/SplitPanesStory.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/SplitPanesStory.tsx
@@ -1,4 +1,4 @@
-import {Flex, ToastProvider, PortalProvider} from '@sanity/ui'
+import {Flex, ToastProvider, PortalProvider, useTheme} from '@sanity/ui'
 import React, {useState, useCallback} from 'react'
 import {useBoolean} from '@sanity/ui-workshop'
 import {PaneLayout} from '../../PaneLayout'
@@ -50,11 +50,15 @@ function DeskTool(props: {
 }) {
   const {collapsed, onCollapse, onExpand, path, setPath} = props
 
+  const {
+    sanity: {media},
+  } = useTheme()
+
   return (
     <PaneLayout
       flex={1}
       height={collapsed ? undefined : 'fill'}
-      minWidth={512}
+      minWidth={media[1]}
       onCollapse={onCollapse}
       onExpand={onExpand}
     >

diff --git a/packages/sanity/src/desk/panes/document/DocumentPane.tsx b/packages/sanity/src/desk/panes/document/DocumentPane.tsx
@@ -46,7 +46,8 @@ import {
 type DocumentPaneOptions = DocumentPaneNode['options']
 
 const DIALOG_PROVIDER_POSITION: DialogProviderProps['position'] = [
-  // We use the `position: fixed` for dialogs on narrow screens (< 512px).
+  // We use the `position: fixed` for dialogs on narrower screens (first two media breakpoints).
+  'fixed',
   'fixed',
   // And we use the `position: absolute` strategy (within panes) on wide screens.
   'absolute',