From 442991efc48770c3c2cd25d970866a3cf521b822 Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Wed, 8 Nov 2023 01:41:49 +0000
Subject: [PATCH] fix: increase default media size, use correct sizes for
 detail text + preview skeletons

---
 packages/sanity/src/core/components/previews/constants.ts   | 2 +-
 .../src/core/components/previews/general/DefaultPreview.tsx | 6 +++---
 .../components/previews/general/DetailPreview.styled.ts     | 2 +-
 .../src/core/components/previews/general/DetailPreview.tsx  | 6 +++---
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/sanity/src/core/components/previews/constants.ts b/packages/sanity/src/core/components/previews/constants.ts
index 1dbbf0e6482..9c091c37a22 100644
--- a/packages/sanity/src/core/components/previews/constants.ts
+++ b/packages/sanity/src/core/components/previews/constants.ts
@@ -3,7 +3,7 @@ import {PreviewLayoutKey} from './types'
 export const PREVIEW_MEDIA_SIZE: Record<PreviewLayoutKey, {width: number; height: number}> = {
   block: {width: 33, height: 33},
   blockImage: {width: 600, height: 400},
-  default: {width: 35, height: 35},
+  default: {width: 43, height: 43},
   detail: {width: 75, height: 75},
   inline: {width: 15, height: 15},
   media: {width: 160, height: 160},
diff --git a/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx b/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx
index b74253eb7cf..41deda92a12 100644
--- a/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx
+++ b/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx
@@ -37,7 +37,7 @@ const Root = styled(Flex)`
   height: ${rem(PREVIEW_MEDIA_SIZE.default.height)};
 `
 
-const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1})`
+const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1, size: 1})`
   max-width: ${rem(160)};
   width: 80%;
 `
@@ -75,7 +75,7 @@ export function DefaultPreview(props: DefaultPreviewProps) {
         <Stack
           data-testid="default-preview__heading"
           flex={1}
-          paddingLeft={media === false ? 1 : 2}
+          paddingLeft={1}
           paddingRight={status ? 0 : 1}
           space={2}
         >
@@ -103,7 +103,7 @@ export function DefaultPreview(props: DefaultPreviewProps) {
         className={styles?.heading}
         data-testid="default-preview__header"
         flex={1}
-        paddingLeft={media ? 2 : 1}
+        paddingLeft={media ? 3 : 1}
         paddingRight={status ? 0 : 1}
         space={2}
       >
diff --git a/packages/sanity/src/core/components/previews/general/DetailPreview.styled.ts b/packages/sanity/src/core/components/previews/general/DetailPreview.styled.ts
index eb891a83eec..d1ebfb0fd94 100644
--- a/packages/sanity/src/core/components/previews/general/DetailPreview.styled.ts
+++ b/packages/sanity/src/core/components/previews/general/DetailPreview.styled.ts
@@ -15,7 +15,7 @@ export const MediaSkeleton = styled(Skeleton).attrs({animated: true, radius: 2})
   height: ${rem(PREVIEW_MEDIA_SIZE.detail.height)};
 `
 
-export const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1})`
+export const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1, size: 1})`
   max-width: ${rem(160)}; /* 80% of 200px */
   width: 80%;
 `
diff --git a/packages/sanity/src/core/components/previews/general/DetailPreview.tsx b/packages/sanity/src/core/components/previews/general/DetailPreview.tsx
index f72ed14102b..869ae0df008 100644
--- a/packages/sanity/src/core/components/previews/general/DetailPreview.tsx
+++ b/packages/sanity/src/core/components/previews/general/DetailPreview.tsx
@@ -53,7 +53,7 @@ export function DetailPreview(props: DetailPreviewProps) {
       <RootFlex data-testid="detail-preview">
         {media !== false && <MediaSkeleton data-testid="detail-preview__media" />}
 
-        <Box flex={1} paddingLeft={media === false ? 1 : 2}>
+        <Box flex={1} paddingLeft={media === false ? 1 : 3}>
           <Flex align="center" data-testid="detail-preview__header">
             <Stack flex={1} space={2}>
               <TitleSkeleton />
@@ -79,10 +79,10 @@ export function DetailPreview(props: DetailPreviewProps) {
         <Media dimensions={mediaDimensions} layout="detail" media={media as any} />
       )}
 
-      <Box flex={1} paddingLeft={media === false ? 1 : 2}>
+      <Box flex={1} paddingLeft={media === false ? 1 : 3}>
         <Flex align="center" data-testid="detail-preview__header">
           <Stack flex={1} space={2}>
-            <Text textOverflow="ellipsis" style={{color: 'inherit'}}>
+            <Text textOverflow="ellipsis" size={1} style={{color: 'inherit'}} weight="medium">
               {title && renderPreviewNode(title, 'detail')}
               {!title && <>Untitled</>}
             </Text>