fix(base): fix usage of inset property (#2769)

sanity-io · Sep 13, 2021 · 3448ee7 · 3448ee7 · vercel · Sep 13, 2021
1 parent 9ba888c
commit 3448ee7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/packages/@sanity/base/src/components/previews/defaultPreview.tsx b/packages/@sanity/base/src/components/previews/defaultPreview.tsx
@@ -17,7 +17,10 @@ const MediaWrapper = styled(Flex)`
 
   & img {
     position: absolute;
-    inset: 0;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
     object-fit: cover;
     border-radius: inherit;
   }
@@ -35,7 +38,10 @@ const MediaWrapper = styled(Flex)`
   & img + span {
     display: block;
     position: absolute;
-    inset: 0 0 0 0;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
     box-shadow: inset 0 0 0 1px var(--card-fg-color);
     opacity: 0.2;
     border-radius: inherit;

diff --git a/packages/@sanity/base/src/components/previews/mediaPreview.styled.tsx b/packages/@sanity/base/src/components/previews/mediaPreview.styled.tsx
@@ -3,7 +3,10 @@ import styled from 'styled-components'
 
 export const MediaWrapper = styled(Flex)`
   position: absolute !important;
-  inset: 0;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
   background-color: var(--card-hairline-hard-color);
   border-radius: ${({theme}) => rem(theme.sanity.radius[2])};
 
@@ -17,16 +20,17 @@ export const MediaWrapper = styled(Flex)`
   &::after {
     content: '';
     position: absolute;
-    inset: 0;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
     box-shadow: inset 0 0 0 1px var(--card-shadow-umbra-color);
     border-radius: ${({theme}) => rem(theme.sanity.radius[2])};
   }
 `
 
 export const Root = styled(Box)`
   position: relative;
-  overflow: hidden;
-  flex-grow: 1;
 `
 
 export const MediaString = styled(Flex)`
@@ -39,7 +43,10 @@ export const MediaString = styled(Flex)`
 
 export const ProgressWrapper = styled(Flex)`
   position: absolute;
-  inset: 0;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
   display: flex;
 
   > * {
@@ -51,7 +58,11 @@ export const ProgressWrapper = styled(Flex)`
     background-color: var(--card-bg-color);
     opacity: 0.7;
     content: '';
+    display: block;
     position: absolute;
-    inset: 0;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
   }
 `