From e7f0d4950a98e9cfaaab5167999c9f4ad72fff6f Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Tue, 13 Feb 2024 12:22:39 +0100
Subject: [PATCH] fix: fix controls overlapping back button without
 accidentally moving controls

---
 apps/expo/src/components/player/Header.tsx         | 2 +-
 apps/expo/src/components/player/MiddleControls.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/expo/src/components/player/Header.tsx b/apps/expo/src/components/player/Header.tsx
index 8a525a2..15723f8 100644
--- a/apps/expo/src/components/player/Header.tsx
+++ b/apps/expo/src/components/player/Header.tsx
@@ -18,7 +18,7 @@ interface HeaderProps {
 
 export const Header = ({ data }: HeaderProps) => {
   return (
-    <Controls className="absolute top-0 flex w-full flex-row items-center justify-between px-6 pt-6">
+    <Controls className="absolute top-0 z-10 flex w-full flex-row items-center justify-between px-6 pt-6">
       <BackButton className="w-36" />
       <Text className="font-bold">
         {data.season && data.episode
diff --git a/apps/expo/src/components/player/MiddleControls.tsx b/apps/expo/src/components/player/MiddleControls.tsx
index 3baea7c..a0dd543 100644
--- a/apps/expo/src/components/player/MiddleControls.tsx
+++ b/apps/expo/src/components/player/MiddleControls.tsx
@@ -15,7 +15,7 @@ export const MiddleControls = () => {
 
   return (
     <TouchableWithoutFeedback onPress={handleTouch}>
-      <View className="absolute flex h-full w-full flex-1 flex-row items-center justify-center gap-24">
+      <View className="absolute inset-x-0 top-1/3 bottom-1/3 flex flex-row items-center justify-center gap-24">
         <Controls>
           <SeekButton type="backward" />
         </Controls>