fix: fix back button alignment on smaller breakpoints, tweak search s…

…tyles
sanity-io · Dec 19, 2023 · d680d5f · d680d5f
1 parent 1afcc29
commit d680d5f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
@@ -20,7 +20,8 @@ const AnimatedSpinnerIcon = styled(SpinnerIcon)`
   animation: ${rotate} 500ms linear infinite;
 `
 
-const FilterBox = styled(Box)`
+const FilterDiv = styled.div`
+  line-height: 0;
   position: relative;
 `
 
@@ -90,15 +91,13 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
       <Flex align="center" flex={1} gap={fullscreen ? 2 : 1} padding={fullscreen ? 2 : 1}>
         {/* (Fullscreen) Close button */}
         {fullscreen && (
-          <Card>
-            <Button
-              aria-label={t('search.action.close-search-aria-label')}
-              icon={ArrowLeftIcon}
-              mode="bleed"
-              onClick={onClose}
-              tooltipProps={{content: t('search.action.close-search-aria-label')}}
-            />
-          </Card>
+          <Button
+            aria-label={t('search.action.close-search-aria-label')}
+            icon={ArrowLeftIcon}
+            mode="bleed"
+            onClick={onClose}
+            tooltipProps={{content: t('search.action.close-search-aria-label')}}
+          />
         )}
 
         {/* Search field */}
@@ -112,7 +111,7 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
             autoComplete="off"
             border={false}
             clearButton={!!query}
-            fontSize={1}
+            fontSize={[2, 2, 1]}
             icon={loading ? AnimatedSpinnerIcon : SearchIcon}
             onChange={handleQueryChange}
             onClear={handleQueryClear}
@@ -126,7 +125,7 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
 
         {/* Filter toggle */}
         {fullscreen && (
-          <FilterBox>
+          <FilterDiv>
             <Button
               aria-expanded={filtersVisible}
               aria-label={t('search.action.toggle-filters-aria-label', {
@@ -141,7 +140,7 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
               tooltipProps={{content: filtersVisible ? 'Hide filters' : 'Show filters'}}
             />
             {notificationBadgeVisible && <NotificationBadge />}
-          </FilterBox>
+          </FilterDiv>
         )}
       </Flex>
     </Card>

diff --git a/packages/sanity/src/desk/components/pane/PaneHeader.tsx b/packages/sanity/src/desk/components/pane/PaneHeader.tsx
@@ -72,7 +72,7 @@ export const PaneHeader = forwardRef(function PaneHeader(
               style={layoutStyle}
             >
               {backButton && (
-                <Box flex="none" padding={1}>
+                <Box flex="none" padding={1} paddingLeft={0}>
                   {backButton}
                 </Box>
               )}