From f2efb8b28ccfd0f643d0a22e9642959cf287b841 Mon Sep 17 00:00:00 2001
From: Jake <134332787+justjxke@users.noreply.github.com>
Date: Wed, 28 Jan 2026 13:55:42 +0000
Subject: [PATCH] channelTabs macos tweaks (#701)

---
 .../components/ChannelTabsContainer.tsx       |  2 -
 src/equicordplugins/channelTabs/style.css     | 37 +++++++++++--------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/equicordplugins/channelTabs/components/ChannelTabsContainer.tsx b/src/equicordplugins/channelTabs/components/ChannelTabsContainer.tsx
index a57ff04e2..d878f1c49 100644
--- a/src/equicordplugins/channelTabs/components/ChannelTabsContainer.tsx
+++ b/src/equicordplugins/channelTabs/components/ChannelTabsContainer.tsx
@@ -8,7 +8,6 @@ import { Flex } from "@components/Flex";
 import { Heading } from "@components/Heading";
 import { Paragraph } from "@components/Paragraph";
 import { BasicChannelTabsProps, ChannelTabsProps, clearStaleNavigationContext, closeTab, createTab, handleChannelSwitch, isNavigationFromSource, isTabSelected, moveToTab, openedTabs, openStartupTabs, saveTabs, settings, setUpdaterFunction, useGhostTabs } from "@equicordplugins/channelTabs/util";
-import { IS_MAC } from "@utils/constants";
 import { classNameFactory } from "@utils/css";
 import { classes } from "@utils/misc";
 import { useForceUpdater } from "@utils/react";
@@ -294,7 +293,6 @@ export default function ChannelsTabsContainer(props: BasicChannelTabsProps) {
             className={classes(
                 cl("container"),
                 tabBarPosition === "top" && cl("container-top"),
-                IS_MAC && tabBarPosition === "top" && cl("container-top-macos"),
                 !animationHover && cl("no-hover-animation"),
                 !animationSelection && cl("no-selection-animation"),
                 !animationDragDrop && cl("no-drag-animation"),
diff --git a/src/equicordplugins/channelTabs/style.css b/src/equicordplugins/channelTabs/style.css
index 3b882fc83..4227d3c9d 100644
--- a/src/equicordplugins/channelTabs/style.css
+++ b/src/equicordplugins/channelTabs/style.css
@@ -78,10 +78,6 @@
     overflow: hidden;
 }
 
-.vc-channeltabs-container-top-macos {
-    padding-left: 80px !important;
-}
-
 .vc-channeltabs-separator {
     width: 98%;
     height: 1px;
@@ -1172,6 +1168,7 @@
     width: 20px;
     height: 20px;
     min-width: 20px;
+    max-width: 20px;
     font-size: 12px;
     font-weight: 700;
     display: flex;
@@ -1179,28 +1176,32 @@
     justify-content: center;
     padding: 0;
     transition:
-        opacity 0.4s ease-out 0.2s,
-        transform 0.4s ease-out 0.2s,
-        margin 0.4s ease-out;
+        opacity 0.2s ease-out,
+        transform 0.2s ease-out,
+        max-width 0.2s ease-out,
+        margin 0.2s ease-out;
     flex-shrink: 0;
+    overflow: hidden;
 }
 
 /* position: Left */
 .vc-channeltabs-tab-number-badge[data-position="left"] {
     margin-right: 0.5rem;
     transition:
-        opacity 0.4s ease-out,
-        transform 0.4s ease-out,
-        margin-right 0.4s ease-out;
+        opacity 0.2s ease-out,
+        transform 0.2s ease-out,
+        max-width 0.2s ease-out,
+        margin-right 0.2s ease-out;
 }
 
 /* position: Right */
 .vc-channeltabs-tab-number-badge[data-position="right"] {
     margin-left: 0.5rem;
     transition:
-        opacity 0.4s ease-out 0.2s,
-        transform 0.4s ease-out 0.2s,
-        margin-left 0.4s ease-out;
+        opacity 0.2s ease-out,
+        transform 0.2s ease-out,
+        max-width 0.2s ease-out,
+        margin-left 0.2s ease-out;
 }
 
 /* hover effect (slight scale up) */
@@ -1211,17 +1212,21 @@
 /* directional slide animations for compact mode */
 .vc-channeltabs-tab-compact:not(:hover, .vc-channeltabs-tab-selected) .vc-channeltabs-tab-number-badge[data-position="right"] {
     opacity: 0;
-    transform: translateX(-10px) scale(0.95);
+    transform: translateX(-6px) scale(0.95);
+    max-width: 0;
+    margin-left: 0;
     pointer-events: none;
 }
 
 .vc-channeltabs-tab-compact:not(:hover, .vc-channeltabs-tab-selected) .vc-channeltabs-tab-number-badge[data-position="left"] {
     opacity: 0;
-    transform: translateX(-15px) scale(0.9);
+    transform: translateX(-6px) scale(0.95);
+    max-width: 0;
+    margin-right: 0;
     pointer-events: none;
 }
 
 /* disable transitions when compact expand animation is disabled */
 .vc-channeltabs-no-compact-animation .vc-channeltabs-tab-number-badge {
     transition: none !important;
-}
\ No newline at end of file
+}