From fe5d5eb8c09ddc98fd8e1fd4761f0e8ae3184cb2 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Thu, 19 Dec 2024 18:57:14 -0600
Subject: [PATCH] fix: Safari top/bottom border bug

---
 src/components/players/default-player.tsx | 6 +++---
 src/components/video.tsx                  | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/players/default-player.tsx b/src/components/players/default-player.tsx
index 01f6e04..d55f3bf 100644
--- a/src/components/players/default-player.tsx
+++ b/src/components/players/default-player.tsx
@@ -68,7 +68,7 @@ const DefaultPlayer = forwardRef<HTMLVideoElement, Omit<MediaProps, 'ref'> & Pla
     const showCustomBlur = isCustomPoster && blurDataURL !== asset?.blurDataURL;
 
     if (showGeneratedBlur || showCustomBlur) {
-      imgStyleProps.gridArea = '1 / 1';
+      imgStyleProps.gridArea = '1/1';
       imgStyleProps.width = '100%';
       imgStyleProps.height = '100%';
       imgStyleProps.color = 'transparent';
@@ -112,7 +112,7 @@ const DefaultPlayer = forwardRef<HTMLVideoElement, Omit<MediaProps, 'ref'> & Pla
             suppressHydrationWarning
             ref={forwardedRef}
             style={{
-              gridArea: '1 / 1',
+              gridArea: '1/1',
             }}
             slot="media"
             poster={poster}
@@ -140,7 +140,7 @@ const DefaultPlayer = forwardRef<HTMLVideoElement, Omit<MediaProps, 'ref'> & Pla
         suppressHydrationWarning
         ref={forwardedRef}
         style={{
-          gridArea: '1 / 1',
+          gridArea: '1/1',
           ...style,
         }}
         controls={controls === false ? undefined : true}
diff --git a/src/components/video.tsx b/src/components/video.tsx
index 16eac97..431cde6 100644
--- a/src/components/video.tsx
+++ b/src/components/video.tsx
@@ -70,6 +70,7 @@ const NextVideo = forwardRef<HTMLVideoElement, VideoProps>((props, forwardedRef)
       <style>{
         /* css */`
         .next-video-container {
+          display: grid;  /* Fixes a Safari aspect-ratio + height bug. */
           position: relative;
           width: 100%;
           aspect-ratio: 16 / 9;