From 02d0aef49770d7d7c30b1b92aa6fff36e8f8982e Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Thu, 19 Sep 2024 21:42:50 +0200
Subject: [PATCH] [bugfix] fix overflow hidden causing weird blury issue

---
 .../maps-playlists-panel.component.tsx               |  6 +++---
 .../bs-content-tab-item.component.tsx                |  6 +++---
 .../bs-content-tab-panel.component.tsx               | 12 +++++++-----
 .../components/shared/laser-slider.component.tsx     |  3 ++-
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/maps-playlists-panel/maps-playlists-panel.component.tsx b/src/renderer/components/maps-playlists-panel/maps-playlists-panel.component.tsx
index 214966e7..4460be9b 100644
--- a/src/renderer/components/maps-playlists-panel/maps-playlists-panel.component.tsx
+++ b/src/renderer/components/maps-playlists-panel/maps-playlists-panel.component.tsx
@@ -118,8 +118,8 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
     })();
 
     return (
-        <div className="w-full h-full flex flex-col items-center justify-center gap-4">
-            <nav className="w-full shrink-0 flex h-9 justify-center px-40 gap-2 text-main-color-1 dark:text-white">
+        <>
+            <nav className="w-full shrink-0 flex h-9 justify-center px-40 gap-2 text-main-color-1 dark:text-white mb-4">
                 <BsmButton
                     className="flex items-center justify-center w-fit rounded-full px-2 py-1 font-bold whitespace-nowrap"
                     icon="add"
@@ -178,6 +178,6 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
                     <LocalPlaylistsListPanel className="w-full h-full shrink-0" isActive={isActive && tabIndex === 1} ref={playlistsRef} version={version} linkedState={playlistLinkedState} filter={playlistFilter} search={search}/>
                 </InstalledMapsContext.Provider>
             </BsContentTabPanel>
-        </div>
+            </>
     );
 }
diff --git a/src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-item.component.tsx b/src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-item.component.tsx
index 8ff22d3d..7bd1b5e9 100644
--- a/src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-item.component.tsx
+++ b/src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-item.component.tsx
@@ -25,13 +25,13 @@ export const BsContentTabItem: BsContentTabItemComponent = ({ text, icon: Icon,
     }
 
     return (
-        <li className={`relative w-full cursor-pointer flex-1 text-center text-lg font-bold flex justify-center items-center content-center px-7 bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-1 dark:hover:bg-main-color-1 ${active && "!bg-light-main-color-1 dark:!bg-main-color-1"}`} onClick={handleClick}>
+        <li className={`relative w-full cursor-pointer text-center font-bold flex justify-center items-center content-center px-7 bg-theme-2 hover:bg-theme-1 rounded-l-md ${active && "!bg-theme-1"}`} onClick={handleClick}>
             <div className="flex flex-col gap-0.5 justify-start items-center text-main-color-1 dark:text-gray-200">
-                <Icon className="w-7 h-7"/>
+                <Icon className="size-7"/>
                 <span className=" font-thin italic text-xs">{t(text)}</span>
             </div>
             {linkProps && (
-                <div className="flex items-center absolute top-1.5 left-1.5">
+                <div className="absolute top-1.5 left-1.5">
                     <LinkButton
                         state={linkProps.state}
                         className={linkProps.className ?? "block w-6 h-6 aspect-square blur-0 cursor-pointer hover:brightness-75"}
diff --git a/src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-panel.component.tsx b/src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-panel.component.tsx
index 2ee8f606..f662675e 100644
--- a/src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-panel.component.tsx
+++ b/src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-panel.component.tsx
@@ -15,8 +15,8 @@ export function BsContentTabPanel({className, tabIndex, tabs, onTabChange, child
     const sliderColor = useThemeColor("second-color");
 
     return (
-        <div className={className ?? "w-full h-full flex flex-row bg-light-main-color-1 dark:bg-main-color-1 rounded-md shadow-black shadow-md overflow-hidden"}>
-            <nav className="h-full grid grid-flow-row !rounded-none shadow-sm flex-shrink-0">
+        <div className={className ?? "flex-grow basis-0 min-h-0 w-full flex flex-row bg-light-main-color-1 dark:bg-main-color-1 rounded-md shadow-black shadow-md"}>
+            <nav className="h-full grid grid-flow-row shadow-sm flex-shrink-0">
                 {tabs.map((tab, i) => (
                     <BsContentTabItem
                         key={`${tab.text}${tab.icon}`}
@@ -26,9 +26,11 @@ export function BsContentTabPanel({className, tabIndex, tabs, onTabChange, child
                     />
                 ))}
             </nav>
-            <LaserSlider className="h-full w-1 relative shrink-0" mode="vertical" color={sliderColor} nbSteps={tabs.length} step={tabIndex}/>
-            <div className="flex-grow h-full flex flex-col transition-all duration-300" style={{ translate: `0 ${0 - tabIndex * 100}%` }}>
-                {children}
+            <LaserSlider className="h-full w-1 shrink-0" mode="vertical" color={sliderColor} nbSteps={tabs.length} step={tabIndex}/>
+            <div className="flex-grow overflow-y-hidden">
+                <div className="size-full flex flex-col transition-transform duration-300" style={{ transform: `translateY(${0 - tabIndex * 100}%)` }}>
+                    {children}
+                </div>
             </div>
         </div>
   )
diff --git a/src/renderer/components/shared/laser-slider.component.tsx b/src/renderer/components/shared/laser-slider.component.tsx
index ce35107a..bc2bea22 100644
--- a/src/renderer/components/shared/laser-slider.component.tsx
+++ b/src/renderer/components/shared/laser-slider.component.tsx
@@ -1,4 +1,5 @@
 import { CSSProperties } from "react";
+import { cn } from "renderer/helpers/css-class.helpers";
 
 type Props = Readonly<{
     mode: "horizontal" | "vertical";
@@ -27,7 +28,7 @@ export function LaserSlider({mode, color, className, nbSteps, step}: Props) {
     })();
 
     return (
-        <div className={className} style={{ color }}>
+        <div className={cn("relative", className)} style={{ color }}>
             <span className="absolute h-full w-full bg-current brightness-50" />
             <span className="absolute block bg-current transition-transform duration-300 shadow-center shadow-current" style={sliderStyle} />
         </div>