remove ::after psudo element, just render the dividers in react

wavetermdev · sawka · Mar 9, 2026 · Feb 19, 2026 · Feb 20, 2026 · Mar 2, 2026
commit ddc9cff5910f82568274f0fd50eca233da75248a
diff --git a/frontend/app/tab/tab.scss b/frontend/app/tab/tab.scss
@@ -1,4 +1,4 @@
-// Copyright 2024, Command Line Inc.
+// Copyright 2026, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
 .tab {
@@ -14,13 +14,12 @@
     align-items: center;
     justify-content: center;
 
-    &::after {
-        content: "";
+    .tab-divider {
         position: absolute;
         left: 0;
         width: 1px;
         height: 14px;
-        border-right: 1px solid rgb(from var(--main-text-color) r g b / 0.2);
+        background: rgb(from var(--main-text-color) r g b / 0.2);
     }
 
     .tab-inner {
@@ -48,15 +47,6 @@
             color: rgba(255, 255, 255, 1);
             font-weight: 600;
         }
-
-        & + .tab::after,
-        &::after {
-            content: none;
-        }
-    }
-
-    &:first-child::after {
-        content: none;
     }
 
     .name {
@@ -104,11 +94,17 @@
 }
 
 // Only apply hover effects when not in nohover mode. This prevents the previously-hovered tab from remaining hovered while a tab view is not mounted.
+body:not(.nohover) .tab:hover + .tab,
+body:not(.nohover) .tab.dragging + .tab {
+    .tab-divider {
+        display: none;
+    }
+}
+
 body:not(.nohover) .tab:hover,
 body:not(.nohover) .tab.dragging {
-    & + .tab::after,
-    &::after {
-        content: none;
+    .tab-divider {
+        display: none;
     }
 
     .tab-inner {

diff --git a/frontend/app/tab/tab.tsx b/frontend/app/tab/tab.tsx
@@ -21,7 +21,7 @@ interface TabVProps {
     tabId: string;
     tabName: string;
     active: boolean;
-    isBeforeActive: boolean;
+    showDivider: boolean;
     isDragging: boolean;
     tabWidth: number;
     isNew: boolean;
@@ -82,7 +82,7 @@ const TabV = forwardRef<HTMLDivElement, TabVProps>((props, ref) => {
         tabId,
         tabName,
         active,
-        isBeforeActive,
+        showDivider,
         isDragging,
         tabWidth,
         isNew,
@@ -204,14 +204,14 @@ const TabV = forwardRef<HTMLDivElement, TabVProps>((props, ref) => {
             className={clsx("tab", {
                 active,
                 dragging: isDragging,
-                "before-active": isBeforeActive,
                 "new-tab": isNew,
             })}
             onMouseDown={onDragStart}
             onClick={onClick}
             onContextMenu={onContextMenu}
             data-tab-id={tabId}
         >
+            {showDivider && <div className="tab-divider" />}
             <div className="tab-inner">
                 <div
                     ref={editableRef}
@@ -318,8 +318,7 @@ function buildTabContextMenu(
 interface TabProps {
     id: string;
     active: boolean;
-    isFirst: boolean;
-    isBeforeActive: boolean;
+    showDivider: boolean;
     isDragging: boolean;
     tabWidth: number;
     isNew: boolean;
@@ -330,7 +329,7 @@ interface TabProps {
 }
 
 const TabInner = forwardRef<HTMLDivElement, TabProps>((props, ref) => {
-    const { id, active, isBeforeActive, isDragging, tabWidth, isNew, onLoaded, onSelect, onClose, onDragStart } = props;
+    const { id, active, showDivider, isDragging, tabWidth, isNew, onLoaded, onSelect, onClose, onDragStart } = props;
     const [tabData, _] = useWaveObjectValue<Tab>(makeORef("tab", id));
     const badges = useAtomValue(getTabBadgeAtom(id));
 
@@ -382,7 +381,7 @@ const TabInner = forwardRef<HTMLDivElement, TabProps>((props, ref) => {
             tabId={id}
             tabName={tabData?.name ?? ""}
             active={active}
-            isBeforeActive={isBeforeActive}
+            showDivider={showDivider}
             isDragging={isDragging}
             tabWidth={tabWidth}
             isNew={isNew}

diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx
@@ -622,9 +622,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
         });
     }, []);
 
-    const isBeforeActive = (tabId: string) => {
-        return tabIds.indexOf(tabId) === tabIds.indexOf(activeTabId) - 1;
-    };
+    const activeTabIndex = tabIds.indexOf(activeTabId);
 
     function onEllipsisClick() {
         getApi().showWorkspaceAppMenu(workspace.oid);
@@ -689,18 +687,19 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
             <div className="tab-bar" ref={tabBarRef} data-overlayscrollbars-initialize>
                 <div className="tabs-wrapper" ref={tabsWrapperRef} style={{ width: `${tabsWrapperWidth}px` }}>
                     {tabIds.map((tabId, index) => {
+                        const isActive = activeTabId === tabId;
+                        const showDivider = index !== 0 && !isActive && index !== activeTabIndex + 1;
                         return (
                             <Tab
                                 key={tabId}
                                 ref={tabRefs.current[index]}
                                 id={tabId}
-                                isFirst={index === 0}
+                                showDivider={showDivider}
                                 onSelect={() => handleSelectTab(tabId)}
-                                active={activeTabId === tabId}
+                                active={isActive}
                                 onDragStart={(event) => handleDragStart(event, tabId, tabRefs.current[index])}
                                 onClose={(event) => handleCloseTab(event, tabId)}
                                 onLoaded={() => handleTabLoaded(tabId)}
-                                isBeforeActive={isBeforeActive(tabId)}
                                 isDragging={draggingTab === tabId}
                                 tabWidth={tabWidthRef.current}
                                 isNew={tabId === newTabId}

diff --git a/frontend/preview/previews/tab.preview.tsx b/frontend/preview/previews/tab.preview.tsx
@@ -11,18 +11,16 @@ interface PreviewTabEntry {
     tabId: string;
     tabName: string;
     active: boolean;
-    isBeforeActive: boolean;
     badges?: Badge[] | null;
     flagColor?: string | null;
 }
 
 const tabDefs: PreviewTabEntry[] = [
-    { tabId: "preview-tab-1", tabName: "Terminal", active: false, isBeforeActive: true },
+    { tabId: "preview-tab-1", tabName: "Terminal", active: false },
     {
         tabId: "preview-tab-2",
         tabName: "My Tab",
         active: true,
-        isBeforeActive: false,
         badges: [
             { badgeid: "b2", icon: "circle-check", color: "#4ade80", priority: 3 },
             { badgeid: "b1", icon: "circle-small", color: "#fbbf24", priority: 1 },
@@ -33,26 +31,23 @@ const tabDefs: PreviewTabEntry[] = [
         tabId: "preview-tab-2b",
         tabName: "My Tab 2",
         active: false,
-        isBeforeActive: false,
         badges: [
             { badgeid: "b2", icon: "bell", color: "#4ade80", priority: 3 },
             { badgeid: "b1", icon: "circle-small", color: "red", priority: 1 },
         ],
     },
-    { tabId: "preview-tab-3", tabName: "T3", active: false, isBeforeActive: false, flagColor: "#4ade80" },
+    { tabId: "preview-tab-3", tabName: "T3", active: false, flagColor: "#4ade80" },
     {
         tabId: "preview-tab-4",
         tabName: "1 Badge",
         active: false,
-        isBeforeActive: false,
         badges: [{ badgeid: "b1", icon: "circle-small", color: "#fbbf24", priority: 1 }],
         flagColor: "#fbbf24",
     },
     {
         tabId: "preview-tab-5",
         tabName: "3 Badges",
         active: false,
-        isBeforeActive: false,
         badges: [
             { badgeid: "b1", icon: "circle-small", color: "#fbbf24", priority: 1 },
             { badgeid: "b2", icon: "circle-check", color: "#4ade80", priority: 3 },
@@ -86,7 +81,7 @@ export function TabPreview() {
             {tabDefs.map((tab, index) => {
                 const activeIndex = tabDefs.findIndex((t) => t.tabId === activeTabId);
                 const isActive = tab.tabId === activeTabId;
-                const isBeforeActive = index === activeIndex - 1;
+                const showDivider = index !== 0 && !isActive && index !== activeIndex + 1;
                 return (
                     <TabV
                         key={tab.tabId}
@@ -96,7 +91,7 @@ export function TabPreview() {
                         tabId={tab.tabId}
                         tabName={tabNames[tab.tabId]}
                         active={isActive}
-                        isBeforeActive={isBeforeActive}
+                        showDivider={showDivider}
                         isDragging={false}
                         tabWidth={TAB_WIDTH}
                         isNew={false}

diff --git a/frontend/tailwindsetup.css b/frontend/tailwindsetup.css
@@ -1,7 +1,8 @@
-/* Copyright 2025, Command Line Inc.
+/* Copyright 2026, Command Line Inc.
    SPDX-License-Identifier: Apache-2.0 */
 
 @import "tailwindcss";
+
 @source "../node_modules/streamdown/dist/index.js";
 
 @theme {
@@ -75,6 +76,13 @@
     --z-window-drag: 100;
 }
 
+/* Applied when body.nohover is set — used to suppress hover effects during tab remount to prevent ghost-hover flicker */
+@custom-variant nohover {
+    body.nohover & {
+        @slot;
+    }
+}
+
 :root {
     --zoomfactor: 1;
     --zoomfactor-inv: 1;