From d680d5fd4c23514cf793f57ef064ade5cce1bdc4 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Tue, 5 Dec 2023 10:20:59 +0000
Subject: [PATCH] fix: fix back button alignment on smaller breakpoints, tweak
 search styles

---
 .../navbar/search/components/SearchHeader.tsx | 25 +++++++++----------
 .../src/desk/components/pane/PaneHeader.tsx   |  2 +-
 2 files changed, 13 insertions(+), 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
index 5f3d3add8cf..4a272a82dde 100644
--- 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
index 5b5f984eb6e..4428751b4ce 100644
--- 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>
               )}