From ccce5ce264c2ba472159b590794b3a063900b8c4 Mon Sep 17 00:00:00 2001
From: leon-morival <leon.morival@gmail.com>
Date: Tue, 30 Sep 2025 14:53:14 +0200
Subject: [PATCH] tab

---
 src/navigation/BottomTab.js |  4 ++--
 src/navigation/TabBar.js    | 21 +++------------------
 2 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/src/navigation/BottomTab.js b/src/navigation/BottomTab.js
index 14e6e89..1ea7678 100644
--- a/src/navigation/BottomTab.js
+++ b/src/navigation/BottomTab.js
@@ -29,8 +29,8 @@ export const BottomTabScreen = () => {
         {
           width: Platform.OS === "web" ? 30 : 24,
           height: Platform.OS === "web" ? 30 : 24,
-          marginBottom: Platform.OS === "web" ? 13 : 0,
-          marginTop: Platform.OS === "web" ? 13 : 0,
+          // marginBottom: Platform.OS === "web" ? 13 : 0,
+          // marginTop: Platform.OS === "web" ? 13 : 0,
         },
       ]}
       source={icon}
diff --git a/src/navigation/TabBar.js b/src/navigation/TabBar.js
index 73aaab2..544064c 100644
--- a/src/navigation/TabBar.js
+++ b/src/navigation/TabBar.js
@@ -1,36 +1,21 @@
 import * as Haptics from "expo-haptics";
-import React, { useMemo } from "react";
+import React from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 
-import { useGlobal } from "reactn";
 import ItemContainer from "../components/ItemContainer/ItemContainer";
 import useLayoutType from "../hooks/useLayoutType";
 import { gutters, Palette, Style } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
 
 const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
-  const { windowWidth, isWeb } = useLayoutType();
-  const [webLayoutMode] = useGlobal("webLayoutMode");
-
-  const containerWidth = useMemo(() => {
-    if (!isWeb) return "90%";
-
-    const containerFraction = webLayoutMode === "playbacks-wide" ? 0.9 : 0.6;
-    const containerMax = webLayoutMode === "playbacks-wide" ? 1440 : 800;
-    const computedContainerWidth = Math.min(
-      windowWidth * containerFraction,
-      containerMax
-    );
-    const barWidth = Math.max(computedContainerWidth * 0.9, 360);
-    return barWidth;
-  }, [isWeb, webLayoutMode, windowWidth]);
+  const { isWeb } = useLayoutType();
 
   return (
     <View
       style={{
         position: "absolute",
         bottom: gutters * 2,
-        width: containerWidth,
+        width: "90%",
         maxWidth: 700,
         alignSelf: "center",
         zIndex: 1,