fix: simplify media queries

Author: stipsan

src/core/frame/WorkshopCanvas.tsx

@@ -1,5 +1,5 @@
 import {Box, Button, Card, Code, ErrorBoundary, Flex, Heading, Spinner, Stack} from '@sanity/ui'
-import {createElement, memo, Suspense, useCallback, useState} from 'react'
+import {memo, Suspense, useCallback, useState} from 'react'
 
 import {WorkshopStory} from '../config'
 import {useWorkshop} from '../useWorkshop'
@@ -35,14 +35,17 @@ export const WorkshopCanvas = memo(function WorkshopCanvas(): React.ReactNode {
       </Card>
     )
   }
+  const Story = story.component
 
   return (
     <>
       <h1 hidden>{story.title}</h1>
 
       <Suspense fallback={<LoadingScreen story={story} />}>
-        <Card as="main" height="fill">
-          <ErrorBoundary onCatch={catchError}>{createElement(story.component)}</ErrorBoundary>
+        <Card as="main" height="fill" overflow="auto">
+          <ErrorBoundary onCatch={catchError}>
+            <Story />
+          </ErrorBoundary>
         </Card>
       </Suspense>
     </>

src/core/inspector/InspectorHeader.tsx

@@ -1,7 +1,7 @@
 import {Card, Layer, Tab, TabList} from '@sanity/ui'
 import {memo, useCallback} from 'react'
 
-import {inspectorHeader, inspectorHeaderCard} from '#styles'
+import {inspectorHeader} from '#styles'
 
 import {InspectorTab} from './types'
 
@@ -14,7 +14,7 @@ export const InspectorHeader = memo(function InspectorHeader(props: {
 
   return (
     <Layer className={inspectorHeader} flex="none" position="sticky">
-      <Card className={inspectorHeaderCard} padding={2} shadow={1}>
+      <Card padding={2} shadow={1}>
         <TabList gap={1}>
           {tabs.map((tab) => (
             <InspectorTabView

src/core/inspector/WorkshopInspector.tsx

@@ -43,6 +43,7 @@ export const WorkshopInspector = memo(function WorkshopInspector(props: {
       display={expanded ? ['block'] : ['none', 'none', 'block']}
       flex={1}
       overflow={['hidden', 'hidden', 'auto']}
+      borderLeft={['none', 'none', 'solid']}
     >
       <Flex direction="column" height="fill">
         {showTabs && <InspectorHeader currentTabId={tabId} onTabChange={setTabId} tabs={tabs} />}

src/core/navigator/WorkshopNavigator.tsx

@@ -103,6 +103,7 @@ const NavigatorView = memo(function NavigatorView(props: {
       display={display}
       flex={1}
       overflow={['hidden', 'hidden', 'auto']}
+      borderRight={['none', 'none', 'solid']}
     >
       <Flex direction="column" height="fill">
         <Layer flex="none">

src/core/styles.css.ts

@@ -1,11 +1,4 @@
-import {vars} from '@sanity/ui/css'
-import {
-  createVar,
-  createViewTransition,
-  fallbackVar,
-  globalStyle,
-  style,
-} from '@vanilla-extract/css'
+import {createVar, createViewTransition, globalStyle, style} from '@vanilla-extract/css'
 import {calc} from '@vanilla-extract/css-utils'
 
 globalStyle('html', {
@@ -20,12 +13,6 @@ globalStyle('html, body', {
   margin: 0,
 })
 
-globalStyle('body', {
-  // Since `@sanity/ui-workshop` is used by `@sanity/ui` we need to fallback to a stable var that exists in dev
-  backgroundColor: fallbackVar(vars.color.tinted.default.bg[1], 'var(--card-bg-color)'),
-  overflow: 'auto',
-})
-
 export const canvasViewTransition = createViewTransition('canvas')
 export const zoom = createVar(
   {
@@ -69,41 +56,14 @@ const workshopAside = style({
   },
 })
 
-export const workshopInspector = style([
-  workshopAside,
-  {
-    '@media': {
-      'screen and (min-width: 600px)': {
-        borderLeft: `1px solid ${fallbackVar(vars.color.tinted.default.border[1], 'var(--card-border-color)')}`,
-      },
-    },
-  },
-])
+export const workshopInspector = style([workshopAside])
 
-export const workshopNavigator = style([
-  workshopAside,
-  {
-    '@media': {
-      'screen and (min-width: 600px)': {
-        borderRight: `1px solid ${fallbackVar(vars.color.tinted.default.border[1], 'var(--card-border-color)')}`,
-      },
-    },
-  },
-])
+export const workshopNavigator = style([workshopAside])
 
 export const inspectorHeader = style({
   top: 0,
 })
 
-export const inspectorHeaderCard = style({
-  'lineHeight': 0,
-  '@media': {
-    'screen and (max-width: 599px)': {
-      textAlign: 'center',
-    },
-  },
-})
-
 export const workshopLayout = style({
   selectors: {
     '&&': {