fix: minor cleanup

Author: stipsan

src/core/Workshop.tsx

@@ -4,7 +4,7 @@ import {debounce} from 'lodash'
 import {isEqual} from 'lodash'
 import {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
-import {forceMinWidth320} from '#styles'
+import {workshopLayout} from '#styles'
 
 import {WorkshopConfig} from './config'
 import {DEFAULT_VIEWPORT_VALUE, DEFAULT_ZOOM_VALUE} from './constants'
@@ -237,7 +237,7 @@ export const Workshop = memo(function Workshop(props: WorkshopProps): React.Reac
       viewport={viewport}
       zoom={zoom}
     >
-      <Flex className={forceMinWidth320} direction="column" height="fill">
+      <Flex className={workshopLayout} direction="column" height="fill">
         {withNavbar && (
           <WorkshopNavbar
             inspectorExpanded={inspectorExpanded}

src/core/inspector/InspectorHeader.tsx

@@ -1,7 +1,7 @@
 import {Card, Layer, Tab, TabList} from '@sanity/ui'
 import {memo, useCallback} from 'react'
 
-import {inspectorHeader} from '#styles'
+import {inspectorHeader, inspectorHeaderCard} 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 padding={2} shadow={1}>
+      <Card className={inspectorHeaderCard} padding={2} shadow={1}>
         <TabList gap={1}>
           {tabs.map((tab) => (
             <InspectorTabView

src/core/inspector/WorkshopInspector.tsx

@@ -37,12 +37,10 @@ export const WorkshopInspector = memo(function WorkshopInspector(props: {
   const currentTab = tabs.find((tab) => tab.id === tabId)
   const showTabs = tabs.length > 1
 
-  const display: ResponsiveProp<Display> = expanded ? ['block'] : ['none', 'none', 'block']
-
   return (
     <Card
       className={workshopInspector}
-      display={display}
+      display={expanded ? ['block'] : ['none', 'none', 'block']}
       flex={1}
       overflow={['hidden', 'hidden', 'auto']}
     >

src/core/navbar/NavbarBreadcrumbs.tsx

@@ -1,7 +1,7 @@
 import {Breadcrumbs, Text} from '@sanity/ui'
 import {memo, useCallback} from 'react'
 
-import {forceColorInherit} from '#styles'
+import {navbarBreadcrumbsLink} from '#styles'
 
 import {useWorkshop} from '../useWorkshop'
 
@@ -45,7 +45,7 @@ const NavbarBreadcrumbsView = memo(function NavbarBreadcrumbsView(props: {
       gap={2}
     >
       <Text size={[2, 2, 1]} weight="bold">
-        <a className={forceColorInherit} href="/" onClick={onHomeClick}>
+        <a className={navbarBreadcrumbsLink} href="/" onClick={onHomeClick}>
           {title}
         </a>
       </Text>

src/core/navbar/WorkshopNavbar.tsx

@@ -2,7 +2,7 @@ import {ControlsIcon, MenuIcon} from '@sanity/icons'
 import {Box, Button, Card, Flex, Inline, Text, useMediaIndex} from '@sanity/ui'
 import {memo} from 'react'
 
-import {force0LineHeight, forceMinWidth250} from '#styles'
+import {navbarBreadcrumbsContainer, navbarCard} from '#styles'
 
 import {useWorkshop} from '../useWorkshop'
 import {NavbarBreadcrumbs} from './NavbarBreadcrumbs'
@@ -23,7 +23,7 @@ export const WorkshopNavbar = memo(function WorkshopNavbar(props: {
   const {story, title} = useWorkshop()
 
   return (
-    <Card className={force0LineHeight} borderBottom flex="none" padding={2}>
+    <Card className={navbarCard} borderBottom flex="none" padding={2}>
       <Flex gap={1}>
         <Box display={['block', 'block', 'none']} flex="none">
           <Button
@@ -38,7 +38,7 @@ export const WorkshopNavbar = memo(function WorkshopNavbar(props: {
         </Box>
 
         <Flex
-          className={forceMinWidth250}
+          className={navbarBreadcrumbsContainer}
           flex={1}
           justify={['center', 'center', 'flex-start']}
           padding={2}

src/core/navigator/WorkshopNavigator.tsx

@@ -4,7 +4,7 @@ import type {Display, ResponsiveProp} from '@sanity/ui/css'
 import {FontTextSize} from '@sanity/ui/theme'
 import {memo, useCallback, useMemo, useState} from 'react'
 
-import {force0LineHeight, workshopNavigator} from '#styles'
+import {navigatorSearchCard, workshopNavigator} from '#styles'
 
 import {WorkshopScope, WorkshopStory} from '../config'
 import {EMPTY_ARRAY} from '../constants'
@@ -106,7 +106,7 @@ const NavigatorView = memo(function NavigatorView(props: {
     >
       <Flex direction="column" height="fill">
         <Layer flex="none">
-          <Card className={force0LineHeight} padding={2} shadow={1}>
+          <Card className={navigatorSearchCard} padding={2} shadow={1}>
             <TextInput
               border={false}
               clearButton={Boolean(query)}

src/core/plugins/props/components/booleanProp.tsx

@@ -1,7 +1,7 @@
 import {Box, Checkbox, Flex, Text} from '@sanity/ui'
 import {memo} from 'react'
 
-import {force0LineHeight} from '#styles'
+import {booleanPropBox} from '#styles'
 
 import {BooleanPropSchema} from '../types'
 import {useProps} from '../useProps'
@@ -16,7 +16,7 @@ export const BooleanProp = memo(function BooleanProp(props: {
 
   return (
     <Flex as="label" padding={3}>
-      <Box className={force0LineHeight} marginRight={2}>
+      <Box className={booleanPropBox} marginRight={2}>
         <Checkbox
           checked={value || false}
           onChange={(event) => setPropValue(schema.name, event.currentTarget.checked)}

src/core/styles.css.ts

@@ -19,19 +19,6 @@ globalStyle('body', {
   overflow: 'hidden',
 })
 
-export const forceMinWidth250 = style({
-  minWidth: '250px !important',
-})
-export const forceMinWidth320 = style({
-  minWidth: '320px !important',
-})
-export const force0LineHeight = style({
-  lineHeight: '0 !important',
-})
-export const forceColorInherit = style({
-  color: 'inherit !important',
-})
-
 export const canvasViewTransition = createViewTransition('canvas')
 export const zoom = createVar(
   {
@@ -109,3 +96,42 @@ export const inspectorHeaderCard = style({
     },
   },
 })
+
+export const workshopLayout = style({
+  selectors: {
+    '&&': {
+      minWidth: '320px',
+    },
+  },
+})
+
+export const navbarBreadcrumbsContainer = style({
+  selectors: {
+    '&&': {
+      minWidth: '250px',
+    },
+  },
+})
+export const navbarBreadcrumbsLink = style({
+  selectors: {
+    '&&': {
+      color: 'inherit',
+    },
+  },
+})
+
+const force0LineHeight = style({
+  selectors: {
+    '&&': {
+      lineHeight: '0',
+    },
+  },
+})
+
+export const navbarCard = style([force0LineHeight])
+
+export const navigatorSearchCard = style([force0LineHeight])
+
+export const booleanPropBox = style([force0LineHeight])
+
+export const perfInspectorCard = style([force0LineHeight])

src/plugin-perf/PerfInspector.tsx

@@ -2,7 +2,7 @@ import {PlayIcon, TrashIcon} from '@sanity/icons'
 import {Box, Button, Card, Flex, Stack, Text} from '@sanity/ui'
 import {memo} from 'react'
 
-import {force0LineHeight} from '#styles'
+import {perfInspectorCard} from '#styles'
 
 import {usePerf} from './hooks'
 
@@ -28,7 +28,7 @@ export const PerfInspector = memo(function PerfInspector(): React.ReactNode {
         const testResults = results.filter((r) => r.name === detail.name)
 
         return (
-          <Card className={force0LineHeight} border key={detail.name} overflow="hidden" radius={2}>
+          <Card key={detail.name} className={perfInspectorCard} border overflow="hidden" radius={2}>
             <Flex>
               <Stack flex={1} padding={2} gap={2}>
                 <Text size={1} weight="semibold">