From 748bdfd59d589bd32d7a9c83f054ba47ac9e5f4f Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Mon, 8 Jun 2026 13:32:44 +0100
Subject: [PATCH] Merge pull request #34395 from
 overleaf/mj-tabs-disable-close-button

[web] Disable close tab button on last tab

GitOrigin-RevId: 2d4600162696b07848311e75154d9d86aac0b315
---
 .../features/source-editor/components/tabs/tab.tsx  |  3 +++
 .../components/tabs/tabs-container.tsx              |  1 +
 .../web/frontend/stylesheets/pages/editor/tabs.scss | 13 +++++++++++++
 .../features/source-editor/components/tabs.spec.tsx | 12 ++----------
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/components/tabs/tab.tsx b/services/web/frontend/js/features/source-editor/components/tabs/tab.tsx
index 3c0b10c162..f207d19b2b 100644
--- a/services/web/frontend/js/features/source-editor/components/tabs/tab.tsx
+++ b/services/web/frontend/js/features/source-editor/components/tabs/tab.tsx
@@ -26,6 +26,7 @@ type TabProps = {
   tab: EditorFileTab
   openTab: (id: string) => void
   closeTab: (id: string) => void
+  canCloseTab: boolean
   makeTabPermanent: (id: string) => void
   openContextMenu: (
     coords: { top: number; left: number },
@@ -56,6 +57,7 @@ export const Tab = memo(function Tab({
   tab,
   openTab,
   closeTab,
+  canCloseTab,
   makeTabPermanent,
   openContextMenu,
   closeContextMenu,
@@ -233,6 +235,7 @@ export const Tab = memo(function Tab({
         <div className="editor-file-tab-action">
           <button
             onClick={onCloseClick}
+            disabled={!canCloseTab}
             className="editor-file-tab-close-action"
             aria-label={t('close')}
           >
diff --git a/services/web/frontend/js/features/source-editor/components/tabs/tabs-container.tsx b/services/web/frontend/js/features/source-editor/components/tabs/tabs-container.tsx
index 0cd1468532..61954f7006 100644
--- a/services/web/frontend/js/features/source-editor/components/tabs/tabs-container.tsx
+++ b/services/web/frontend/js/features/source-editor/components/tabs/tabs-container.tsx
@@ -106,6 +106,7 @@ export const TabsContainer = () => {
             tab={tab}
             openTab={openTab}
             closeTab={closeTab}
+            canCloseTab={tabs.length > 1}
             isSelected={openEntity?.entity._id === tab.id}
             onTabDrop={moveTab}
             makeTabPermanent={makeTabPermanent}
diff --git a/services/web/frontend/stylesheets/pages/editor/tabs.scss b/services/web/frontend/stylesheets/pages/editor/tabs.scss
index 55e5cea53f..0f27e7ba50 100644
--- a/services/web/frontend/stylesheets/pages/editor/tabs.scss
+++ b/services/web/frontend/stylesheets/pages/editor/tabs.scss
@@ -177,10 +177,23 @@
     padding: 0;
     display: flex;
     align-items: center;
+    border-radius: 100%;
+    justify-content: center;
 
     &:hover {
+      background-color: var(--bg-secondary-themed);
       color: var(--content-primary-themed);
     }
+
+    &:disabled {
+      cursor: default;
+      color: var(--content-disabled-themed);
+
+      &:hover {
+        background-color: transparent;
+        color: var(--content-disabled-themed);
+      }
+    }
   }
 
   &:hover,
diff --git a/services/web/test/frontend/features/source-editor/components/tabs.spec.tsx b/services/web/test/frontend/features/source-editor/components/tabs.spec.tsx
index b29d4b6337..5f2422e8ce 100644
--- a/services/web/test/frontend/features/source-editor/components/tabs.spec.tsx
+++ b/services/web/test/frontend/features/source-editor/components/tabs.spec.tsx
@@ -463,14 +463,9 @@ describe('File Tabs', function () {
       cy.then(() => selectDoc(DOC_IDS.main))
       cy.findAllByRole('tab').should('have.length', 1)
 
-      // Attempt to close the only tab
       cy.findByRole('tab', { name: /main\.tex/ }).within(() => {
-        cy.findByRole('button', { name: 'Close' }).click()
+        cy.findByRole('button', { name: 'Close' }).should('be.disabled')
       })
-
-      // Tab must still exist
-      cy.findByRole('tab', { name: /main\.tex/ }).should('exist')
-      cy.findAllByRole('tab').should('have.length', 1)
     })
 
     it('switches to an adjacent tab when closing the currently active tab', function () {
@@ -1152,11 +1147,8 @@ describe('File Tabs', function () {
       cy.findByRole('tab', { name: /appendix\.tex/ }).should('exist')
 
       cy.findByRole('tab', { name: /appendix\.tex/ }).within(() => {
-        cy.findByRole('button', { name: 'Close' }).click()
+        cy.findByRole('button', { name: 'Close' }).should('be.disabled')
       })
-
-      cy.findAllByRole('tab').should('have.length', 1)
-      cy.findByRole('tab', { name: /appendix\.tex/ }).should('exist')
     })
   })