1 files changed, 6 insertions, 7 deletions

diff --git a/apps/web/src/components/editor/media-panel/tabbar.tsx b/apps/web/src/components/editor/media-panel/tabbar.tsx
index bce84a46..fc4f677d 100644
--- a/apps/web/src/components/editor/media-panel/tabbar.tsx
+++ b/apps/web/src/components/editor/media-panel/tabbar.tsx
@@ -69,21 +69,20 @@ export function TabBar() {
       />
       <div
         ref={scrollContainerRef}
-        className="h-12 bg-panel-accent px-3 flex justify-start items-center gap-5 overflow-x-auto scrollbar-x-hidden relative w-full"
+        className="h-full px-4 flex flex-col justify-start items-center gap-5 overflow-x-auto scrollbar-x-hidden relative w-full py-4"
       >
         {(Object.keys(tabs) as Tab[]).map((tabKey) => {
           const tab = tabs[tabKey];
           return (
             <div
               className={cn(
-                "flex flex-col gap-0.5 items-center cursor-pointer",
-                activeTab === tabKey ? "text-primary" : "text-muted-foreground"
+                "flex flex-col gap-0.5 items-center cursor-pointer opacity-100 hover:opacity-75",
+                activeTab === tabKey ? "text-primary !opacity-100" : "text-muted-foreground"
               )}
               onClick={() => setActiveTab(tabKey)}
               key={tabKey}
             >
-              <tab.icon className="!size-[1.1rem]" />
-              <span className="text-[0.65rem]">{tab.label}</span>
+              <tab.icon className="size-[1.1rem]!" />
             </div>
           );
         })}
@@ -114,10 +113,10 @@ function ScrollButton({
     <div className="bg-panel-accent w-12 h-full flex items-center justify-center">
       <Button
         size="icon"
-        className="rounded-[0.4rem] w-4 h-7 !bg-foreground/10"
+        className="rounded-[0.4rem] w-4 h-7 bg-foreground/10!"
         onClick={onClick}
       >
-        <Icon className="!size-4 text-foreground" />
+        <Icon className="size-4! text-foreground" />
       </Button>
     </div>
   );