From c29c2f745e8e52f9d417841be0ed2ddf7516e87e Mon Sep 17 00:00:00 2001
From: Ankita Kinger <28362912+ankitakinger@users.noreply.github.com>
Date: Sat, 12 Feb 2022 08:28:13 +0530
Subject: [PATCH] fix: Comment icon gets hidden behind tabs on Tab widget
 (#11019)

* fix for z-index issue on comments icon

* css changes

* fixed failing cypress tests
---
 .../ClientSideTests/Comments/AddComments_spec.js            | 6 +++---
 app/client/src/comments/inlineComments/InlineCommentPin.tsx | 2 +-
 .../comments/inlineComments/UnpublishedCommentThread.tsx    | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Comments/AddComments_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Comments/AddComments_spec.js
index eef6ad32f0..89687c769e 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Comments/AddComments_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Comments/AddComments_spec.js
@@ -110,7 +110,7 @@ describe("Comments", function() {
 
   // create another comment since the first one is a private bot thread
   it("another comment can be created after dismissing the first one", () => {
-    cy.get(commonLocators.canvas).click(10, 10);
+    cy.get(commonLocators.canvas).click(60, 10);
     // wait for transition to be completed
     // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(300);
@@ -137,8 +137,8 @@ describe("Comments", function() {
   it("unread indicator is visible for another app user when a new comment is added", () => {
     // share app with TESTUSERNAME2
     cy.get(homePage.shareApp).click({ force: true });
-    cy.shareApp(Cypress.env("TESTUSERNAME2"), homePage.adminRole);
-    cy.LogintoApp(Cypress.env("TESTUSERNAME2"), Cypress.env("TESTPASSWORD2"));
+    cy.shareApp(Cypress.env("TESTUSERNAME1"), homePage.adminRole);
+    cy.LogintoApp(Cypress.env("TESTUSERNAME1"), Cypress.env("TESTPASSWORD1"));
 
     // launch the editor
     cy.get(homePage.searchInput).type(appName);
diff --git a/app/client/src/comments/inlineComments/InlineCommentPin.tsx b/app/client/src/comments/inlineComments/InlineCommentPin.tsx
index 19c3bf4391..17aadd0cda 100644
--- a/app/client/src/comments/inlineComments/InlineCommentPin.tsx
+++ b/app/client/src/comments/inlineComments/InlineCommentPin.tsx
@@ -38,7 +38,7 @@ const CommentTriggerContainer = styled.div<{
   xOffset: number;
   yOffset: number;
 }>`
-  position: absolute;
+  position: fixed;
   ${(props) => getPosition(props)}
   z-index: 1;
 `;
diff --git a/app/client/src/comments/inlineComments/UnpublishedCommentThread.tsx b/app/client/src/comments/inlineComments/UnpublishedCommentThread.tsx
index f7f65098ee..bb59eb01c5 100644
--- a/app/client/src/comments/inlineComments/UnpublishedCommentThread.tsx
+++ b/app/client/src/comments/inlineComments/UnpublishedCommentThread.tsx
@@ -28,7 +28,7 @@ const CommentTriggerContainer = styled.div<{
   xOffset: number;
   yOffset: number;
 }>`
-  position: absolute;
+  position: fixed;
   ${(props) => getPosition(props)}
   z-index: 1;
   & svg {