From f8a5cd788119a77f533cca398022e317a9d1a9cc Mon Sep 17 00:00:00 2001
From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com>
Date: Thu, 16 May 2024 17:20:43 +0530
Subject: [PATCH 1/3] feat: initial commit

---
 .../pages/Editor/IDE/EditorTabs/FileTabs.tsx  | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
index c15352100af8..08a6f254e696 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useLocation } from "react-router";
 import clsx from "classnames";
 import { Flex, Icon, ScrollArea } from "design-system";
@@ -25,6 +25,7 @@ interface Props {
 const FileTabs = (props: Props) => {
   const { navigateToTab, onClose, tabs } = props;
   const { segment, segmentMode } = useCurrentEditorState();
+  const [showDivider, setShowDivider] = useState(false);
 
   const location = useLocation();
 
@@ -39,6 +40,13 @@ const FileTabs = (props: Props) => {
     }
   }, [tabs, segmentMode]);
 
+  useEffect(() => {
+    const ele = document.getElementById("t--tabs-overflow-check");
+    if (ele && ele.scrollWidth > ele.clientWidth) {
+      setShowDivider(true);
+    }
+  }, [tabs]);
+
   const onCloseClick = (e: React.MouseEvent, id?: string) => {
     e.stopPropagation();
     onClose(id);
@@ -56,7 +64,14 @@ const FileTabs = (props: Props) => {
       }}
       size={"sm"}
     >
-      <Flex gap="spaces-2" height="100%">
+      <Flex
+        className={clsx({
+          "border-r-[1px]": showDivider,
+        })}
+        gap="spaces-2"
+        height="100%"
+        id="t--tabs-overflow-check"
+      >
         {tabs.map((tab: EntityItem) => (
           <StyledTab
             className={clsx(

From 4b6ca8969af152c84f028f6fcde6495f6b184c63 Mon Sep 17 00:00:00 2001
From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com>
Date: Fri, 17 May 2024 11:04:37 +0530
Subject: [PATCH 2/3] fix: tabs ui updates

---
 .../pages/Editor/IDE/EditorTabs/Container.tsx |  2 +-
 .../pages/Editor/IDE/EditorTabs/FileTabs.tsx  | 20 ++++++++-----------
 .../IDE/EditorTabs/StyledComponents.tsx       | 20 ++++++-------------
 3 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/Container.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/Container.tsx
index 656c858d979d..b248f9e5f969 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/Container.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/Container.tsx
@@ -7,7 +7,7 @@ const Container = (props: { children: ReactNode }) => {
     <Flex
       alignItems="center"
       backgroundColor="#FFFFFF"
-      borderBottom="1px solid var(--ads-v2-color-border)"
+      borderBottom="1px solid var(--ads-v2-color-border-muted)"
       gap="spaces-2"
       maxHeight="32px"
       minHeight="32px"
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
index 08a6f254e696..7c2aaf274a02 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useLocation } from "react-router";
 import clsx from "classnames";
 import { Flex, Icon, ScrollArea } from "design-system";
@@ -25,7 +25,6 @@ interface Props {
 const FileTabs = (props: Props) => {
   const { navigateToTab, onClose, tabs } = props;
   const { segment, segmentMode } = useCurrentEditorState();
-  const [showDivider, setShowDivider] = useState(false);
 
   const location = useLocation();
 
@@ -41,9 +40,13 @@ const FileTabs = (props: Props) => {
   }, [tabs, segmentMode]);
 
   useEffect(() => {
-    const ele = document.getElementById("t--tabs-overflow-check");
+    const ele = document.getElementById(
+      "t--tabs-overflow-check",
+    )?.parentElement;
     if (ele && ele.scrollWidth > ele.clientWidth) {
-      setShowDivider(true);
+      ele.style.borderRight = "1px solid var(--ads-v2-color-border)";
+    } else if (ele) {
+      ele.style.borderRight = "unset";
     }
   }, [tabs]);
 
@@ -64,14 +67,7 @@ const FileTabs = (props: Props) => {
       }}
       size={"sm"}
     >
-      <Flex
-        className={clsx({
-          "border-r-[1px]": showDivider,
-        })}
-        gap="spaces-2"
-        height="100%"
-        id="t--tabs-overflow-check"
-      >
+      <Flex gap="spaces-2" height="100%" id="t--tabs-overflow-check">
         {tabs.map((tab: EntityItem) => (
           <StyledTab
             className={clsx(
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/StyledComponents.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/StyledComponents.tsx
index d281a6bfbdb5..66e40cd39356 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/StyledComponents.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/StyledComponents.tsx
@@ -28,23 +28,15 @@ export const StyledTab = styled(Flex)`
   align-items: center;
   justify-content: center;
   padding: var(--ads-v2-spaces-3);
-
-  // After element - the seperator in between tabs
-  &:not(&.active):not(:has(+ .active)):after {
-    content: "";
-    position: absolute;
-    right: 0;
-    top: 8px;
-    width: 1px;
-    height: 40%;
-    background-color: var(--ads-v2-color-border);
-  }
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-top: 2px solid transparent;
 
   &.active {
     background: var(--ads-v2-colors-control-field-default-bg);
-    border-top: 2px solid var(--ads-v2-color-bg-brand);
-    border-left: 1px solid var(--ads-v2-color-border);
-    border-right: 1px solid var(--ads-v2-color-border);
+    border-top-color: var(--ads-v2-color-bg-brand);
+    border-left-color: var(--ads-v2-color-border-muted);
+    border-right-color: var(--ads-v2-color-border-muted);
   }
 
   & > .tab-close {

From a8655552ed94e197d1e4f3ef457e652f0c0e1d26 Mon Sep 17 00:00:00 2001
From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com>
Date: Fri, 17 May 2024 15:15:50 +0530
Subject: [PATCH 3/3] fix: id format changed

---
 app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
index 7c2aaf274a02..90499d2b984f 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
@@ -22,6 +22,8 @@ interface Props {
   onClose: (actionId?: string) => void;
 }
 
+const FILE_TABS_CONTAINER_ID = "file-tabs-container";
+
 const FileTabs = (props: Props) => {
   const { navigateToTab, onClose, tabs } = props;
   const { segment, segmentMode } = useCurrentEditorState();
@@ -40,9 +42,7 @@ const FileTabs = (props: Props) => {
   }, [tabs, segmentMode]);
 
   useEffect(() => {
-    const ele = document.getElementById(
-      "t--tabs-overflow-check",
-    )?.parentElement;
+    const ele = document.getElementById(FILE_TABS_CONTAINER_ID)?.parentElement;
     if (ele && ele.scrollWidth > ele.clientWidth) {
       ele.style.borderRight = "1px solid var(--ads-v2-color-border)";
     } else if (ele) {
@@ -67,7 +67,7 @@ const FileTabs = (props: Props) => {
       }}
       size={"sm"}
     >
-      <Flex gap="spaces-2" height="100%" id="t--tabs-overflow-check">
+      <Flex gap="spaces-2" height="100%" id={FILE_TABS_CONTAINER_ID}>
         {tabs.map((tab: EntityItem) => (
           <StyledTab
             className={clsx(