From 0c9e9f5f56696ab888965fcbb5f9a3dbe88eaeb7 Mon Sep 17 00:00:00 2001
From: leon-morival <leon.morival@gmail.com>
Date: Tue, 7 Oct 2025 10:25:30 +0200
Subject: [PATCH] style

---
 src/components/player/GlobalAudioPlayer.js | 27 ++++++++++++++--------
 src/navigation/TabBar.js                   |  2 +-
 src/screens/Home/Home.js                   |  3 ++-
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/player/GlobalAudioPlayer.js b/src/components/player/GlobalAudioPlayer.js
index 2ac8fc8..99e9648 100644
--- a/src/components/player/GlobalAudioPlayer.js
+++ b/src/components/player/GlobalAudioPlayer.js
@@ -4,8 +4,9 @@ import { Image, Pressable, StyleSheet, Text, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { icons, img } from "../../assets";
+import { isWeb } from "../../hooks/useLayoutType";
 import usePlayer from "../../hooks/usePlayer";
-import { Palette } from "../../styles";
+import { gutters, Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 
 const formatDuration = (ms) => {
@@ -50,14 +51,24 @@ const GlobalAudioPlayer = () => {
     }
   };
 
+  const TAB_BAR_HEIGHT = 64;
+  const GAP_WITH_TAB = 8;
+  const bottomOffset = (isWeb ? gutters : 3) + TAB_BAR_HEIGHT + GAP_WITH_TAB;
+
   return (
-    <View pointerEvents="box-none" style={styles.host}>
+    <View
+      pointerEvents="box-none"
+      style={[styles.host, { bottom: bottomOffset }]}
+    >
       <BlurView
         intensity={40}
         // tint="dark"
         blurReductionFactor={2}
         // tint="dark"
-        style={[styles.container]}
+        style={[
+          styles.container,
+          { paddingVertical: Math.max(4, insets.bottom / 6) },
+        ]}
         experimentalBlurMethod="dimezisBlurView"
       >
         <Image source={artworkSource} style={styles.cover} />
@@ -91,21 +102,19 @@ const GlobalAudioPlayer = () => {
 const styles = StyleSheet.create({
   host: {
     position: "absolute",
-    left: 0,
-    right: 0,
-    bottom: 0,
+    alignSelf: "center",
+    width: "90%",
+    maxWidth: 500,
     pointerEvents: "box-none",
   },
   container: {
-    marginHorizontal: 16,
-    marginBottom: 80,
+    width: "100%",
     borderRadius: 12,
     flexDirection: "row",
     alignItems: "center",
     gap: 12,
     overflow: "hidden",
     paddingHorizontal: 4,
-    paddingVertical: 4,
     // backgroundColor: "rgba(18, 11, 29, 0.85)",
     // borderWidth: 1,
     // borderColor: "#372152",
diff --git a/src/navigation/TabBar.js b/src/navigation/TabBar.js
index 3dce41a..1ae0195 100644
--- a/src/navigation/TabBar.js
+++ b/src/navigation/TabBar.js
@@ -15,7 +15,7 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
     <View
       style={{
         position: "absolute",
-        bottom: gutters * 2,
+        bottom: isWeb ? gutters : 3,
         width: "90%",
         maxWidth: 500,
         alignSelf: "center",
diff --git a/src/screens/Home/Home.js b/src/screens/Home/Home.js
index ad18581..7aaf0c0 100644
--- a/src/screens/Home/Home.js
+++ b/src/screens/Home/Home.js
@@ -296,7 +296,7 @@ const Home = () => {
         <View
           style={{
             position: "absolute",
-            bottom: isWeb ? 180 : 120,
+            bottom: isWeb ? 180 : 140,
             flexDirection: isWeb ? "row" : "column",
             gap: 5,
             alignSelf: "center",
@@ -360,5 +360,6 @@ const styles = StyleSheet.create({
   carouselSection: {
     width: "100%",
     flex: 1,
+    marginBottom: 40,
   },
 });