chore: revert close button animation (#5946)

revert close button animation

Author: lerouxb

packages/compass-components/src/components/workspace-tabs/tab.spec.tsx

@@ -44,6 +44,10 @@ describe('Tab', function () {
         .visible;
     });
 
+    it('should render the close tab button visible', async function () {
+      expect(await screen.findByLabelText('Close Tab')).to.be.visible;
+    });
+
     it('should call "onClose" when the close button is clicked', async function () {
       expect(onCloseSpy.callCount).to.equal(0);
       const closeTabButton = await screen.findByLabelText('Close Tab');
@@ -74,6 +78,10 @@ describe('Tab', function () {
       );
     });
 
+    it('should render the close tab button hidden', async function () {
+      expect(await screen.findByLabelText('Close Tab')).to.not.be.visible;
+    });
+
     // Focus visible is not working proper in jsdom environment
     it.skip('should render the close tab button visible when the tab is focused', async function () {
       const tabToFocus = await screen.findByRole('tab');

packages/compass-components/src/components/workspace-tabs/tab.tsx

@@ -170,15 +170,11 @@ const tabSubtitleStyles = css({
 });
 
 const closeButtonStyles = css({
-  transition: tabTransition,
-  transitionProperty: 'opacity, transform',
-  transform: 'translateY(44px)',
-  opacity: 0,
+  visibility: 'hidden',
 });
 
 const selectedCloseButtonStyles = css({
-  transform: 'translateY(0)',
-  opacity: 1,
+  visibility: 'visible',
 });
 
 type IconGlyph = Extract<keyof typeof glyphs, string>;