diff --git a/packages/sanity/src/desk/components/deskTool/DeskTool.tsx b/packages/sanity/src/desk/components/deskTool/DeskTool.tsx index c81db16815e..adfd927c07d 100644 --- 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(null) @@ -84,7 +87,7 @@ export const DeskTool = memo(function DeskTool({onPaneChange}: DeskToolProps) { diff --git a/packages/sanity/src/desk/components/pane/__workshop__/ChangeConnectorsStory.tsx b/packages/sanity/src/desk/components/pane/__workshop__/ChangeConnectorsStory.tsx index fce1095e079..7cc4e7d9446 100644 --- 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 ( @@ -72,7 +77,7 @@ export default function ChangeConnectorsStory() { > diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/SplitPanesStory.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/SplitPanesStory.tsx index fe7f50b8f97..b2e2b414f7b 100644 --- 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 ( diff --git a/packages/sanity/src/desk/panes/document/DocumentPane.tsx b/packages/sanity/src/desk/panes/document/DocumentPane.tsx index 932a6c33495..86727ede079 100644 --- 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',