fix: bring back borders

Author: stipsan

src/core/WorkshopProvider.tsx

@@ -92,5 +92,3 @@ export const WorkshopProvider = memo(function WorkshopProvider(
     </WorkshopContext.Provider>
   )
 })
-
-WorkshopProvider.displayName = 'Memo(WorkshopProvider)'

src/core/config/types.ts

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
 import {ElementType, ReactNode} from 'react'
 
 /** @public */

src/core/inspector/WorkshopInspector.tsx

@@ -11,6 +11,7 @@ import {InspectorTab} from './types'
 
 const Root = styled(Card)`
   @media screen and (min-width: 600px) {
+    border-left: 1px solid var(--card-border-color);
     min-width: 180px;
     max-width: 300px;
   }
@@ -46,7 +47,7 @@ export const WorkshopInspector = memo(function WorkshopInspector(props: {
   const display: ResponsiveProp<Display> = expanded ? ['block'] : ['none', 'none', 'block']
 
   return (
-    <Root display={display} flex={1} overflow={['hidden', 'hidden', 'auto']} shadow={1}>
+    <Root display={display} flex={1} overflow={['hidden', 'hidden', 'auto']}>
       <Flex direction="column" height="fill">
         {showTabs && <InspectorHeader currentTabId={tabId} onTabChange={setTabId} tabs={tabs} />}
 

src/core/navigator/WorkshopNavigator.tsx

@@ -15,6 +15,7 @@ import {MenuCollection, MenuList, MenuScope} from './types'
 
 const Root = styled(Card)`
   @media screen and (min-width: 600px) {
+    border-right: 1px solid var(--card-border-color);
     min-width: 180px;
     max-width: 300px;
   }

src/plugin-a11y/A11yInspector.tsx

@@ -1,4 +1,5 @@
-import {Box, Card, CardTone, Code, Stack, Text} from '@sanity/ui'
+import {Box, Card, Code, Stack, Text} from '@sanity/ui'
+import type {CardTone} from '@sanity/ui/theme'
 import axe from 'axe-core'
 import {memo} from 'react'
 

src/plugin-perf/PerfInspector.tsx

@@ -21,14 +21,14 @@ export const PerfInspector = memo(function PerfInspector(): React.ReactNode {
   }
 
   return (
-    <Stack padding={2} space={2}>
+    <Stack padding={2} gap={2}>
       {testDetails.map((detail) => {
         const testResults = results.filter((r) => r.name === detail.name)
 
         return (
           <Card border key={detail.name} overflow="hidden" radius={2} style={{lineHeight: 0}}>
             <Flex>
-              <Stack flex={1} padding={2} space={2}>
+              <Stack flex={1} padding={2} gap={2}>
                 <Text size={1} weight="semibold">
                   {detail.title || detail.name}
                 </Text>