From e45dcf302889f2535305f8455bb2ba96c48bc574 Mon Sep 17 00:00:00 2001
From: Tan Nhu <tan@harness.io>
Date: Fri, 19 Apr 2024 23:17:11 +0000
Subject: [PATCH] Fix broken sticky header in PR page due to library upgrade
 (#1236)

---
 web/src/App.module.scss                                   | 2 +-
 .../BranchProtectionForm/BranchProtectionForm.module.scss | 2 +-
 .../BranchProtection/BranchProtectionListing.module.scss  | 5 +++--
 .../CloneButtonTooltip/CloneButtonTooltip.module.scss     | 3 ++-
 .../CodeCommentStatusSelect.module.scss                   | 2 +-
 .../components/ImageCarousel/ImageCarousel.module.scss    | 8 ++++----
 .../NewRepoModalButton/NewRepoModalButton.module.scss     | 2 +-
 .../NewSpaceModalButton/NewSpaceModalButton.module.scss   | 6 +++---
 web/src/components/PluginsPanel/PluginsPanel.module.scss  | 2 +-
 web/src/pages/Home/Home.module.scss                       | 2 +-
 .../PullRequest/CodeOwners/CodeOwnersOverview.module.scss | 4 ++--
 .../RepositoryContent/FileContent/FileContent.module.scss | 4 ++--
 .../FolderContent/FolderContent.module.scss               | 4 ++--
 .../RepositorySettings/RepositorySettings.module.scss     | 4 ++--
 .../SecurityScanSettings/SecurityScanSettings.module.scss | 2 +-
 web/src/pages/Search/Search.module.scss                   | 2 +-
 .../SpaceAccessControl/SpaceAccessControl.module.scss     | 2 +-
 web/src/pages/SpaceSettings/SpaceSettings.module.scss     | 4 ++--
 web/src/pages/UserProfile/UserProfile.module.scss         | 4 ++--
 web/src/pages/WebhookNew/WehookForm.module.scss           | 2 +-
 20 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/web/src/App.module.scss b/web/src/App.module.scss
index 39a321b8f2..8470184e36 100644
--- a/web/src/App.module.scss
+++ b/web/src/App.module.scss
@@ -31,7 +31,7 @@
       height: 70vh !important;
     }
 
-    .PageBody--pageBody {
+    [class*='PageBody--pageBody'] {
       min-height: calc(var(--page-height) - var(--page-header-height, 64px));
       overflow: visible;
     }
diff --git a/web/src/components/BranchProtection/BranchProtectionForm/BranchProtectionForm.module.scss b/web/src/components/BranchProtection/BranchProtectionForm/BranchProtectionForm.module.scss
index 80fcb69218..0a139b77de 100644
--- a/web/src/components/BranchProtection/BranchProtectionForm/BranchProtectionForm.module.scss
+++ b/web/src/components/BranchProtection/BranchProtectionForm/BranchProtectionForm.module.scss
@@ -138,7 +138,7 @@
 }
 
 .checkboxLabel {
-  :global(.Tooltip--acenter) {
+  :global([class*='Tooltip--acenter']) {
     font-size: 14px;
     font-style: normal;
     font-weight: 600;
diff --git a/web/src/components/BranchProtection/BranchProtectionListing.module.scss b/web/src/components/BranchProtection/BranchProtectionListing.module.scss
index b101892c57..0df7974268 100644
--- a/web/src/components/BranchProtection/BranchProtectionListing.module.scss
+++ b/web/src/components/BranchProtection/BranchProtectionListing.module.scss
@@ -86,12 +86,13 @@
 
 .hideButtonIcon {
   :global {
-    .ConfirmationDialog--header {
+    [class*='ConfirmationDialog--header'] {
       .bp3-icon {
         display: none !important;
       }
     }
-    .ConfirmationDialog--body {
+
+    [class*='ConfirmationDialog--body'] {
       padding-left: 3px !important;
     }
   }
diff --git a/web/src/components/CloneButtonTooltip/CloneButtonTooltip.module.scss b/web/src/components/CloneButtonTooltip/CloneButtonTooltip.module.scss
index db993e2593..702a3cb371 100644
--- a/web/src/components/CloneButtonTooltip/CloneButtonTooltip.module.scss
+++ b/web/src/components/CloneButtonTooltip/CloneButtonTooltip.module.scss
@@ -45,7 +45,8 @@
       margin-left: var(--spacing-small) !important;
     }
   }
-  :global(.StyledProps--font-variation-h4) {
+
+  :global([class*='StyledProps--font-variation-h4']) {
     margin-top: unset !important;
   }
 }
diff --git a/web/src/components/CodeCommentStatusSelect/CodeCommentStatusSelect.module.scss b/web/src/components/CodeCommentStatusSelect/CodeCommentStatusSelect.module.scss
index 1bdf2d6bcf..beb7fd5b66 100644
--- a/web/src/components/CodeCommentStatusSelect/CodeCommentStatusSelect.module.scss
+++ b/web/src/components/CodeCommentStatusSelect/CodeCommentStatusSelect.module.scss
@@ -23,7 +23,7 @@
       width: 100px !important;
       min-width: 103px !important;
 
-      .Select--menuItem {
+      [class*='Select--menuItem'] {
         width: 100px !important;
       }
     }
diff --git a/web/src/components/ImageCarousel/ImageCarousel.module.scss b/web/src/components/ImageCarousel/ImageCarousel.module.scss
index fa12886671..0218b3c184 100644
--- a/web/src/components/ImageCarousel/ImageCarousel.module.scss
+++ b/web/src/components/ImageCarousel/ImageCarousel.module.scss
@@ -50,13 +50,13 @@
       }
     }
 
-    .Dialog--children,
-    .Carousel--carouselItem {
+    [class*='Dialog--children'],
+    [class*='Carousel--carouselItem'] {
       justify-content: center !important;
       align-items: center;
     }
 
-    .Dialog--close {
+    [class*='Dialog--close'] {
       fill: var(--primary-bg) !important;
       --intent-color: var(--primary-bg) !important;
       position: absolute !important;
@@ -71,7 +71,7 @@
   right: 0.75%;
 
   :global {
-    .Button--variation.Button--variation-tertiary {
+    [class*='Button--variation'][class*='Button--variation-tertiary'] {
       --background-color: unset !important;
       .bp3-icon {
         padding-right: unset !important;
diff --git a/web/src/components/NewRepoModalButton/NewRepoModalButton.module.scss b/web/src/components/NewRepoModalButton/NewRepoModalButton.module.scss
index 31fc1afc50..fc14fa49b1 100644
--- a/web/src/components/NewRepoModalButton/NewRepoModalButton.module.scss
+++ b/web/src/components/NewRepoModalButton/NewRepoModalButton.module.scss
@@ -43,7 +43,7 @@
     .bp3-form-helper-text {
       margin-top: unset !important;
     }
-    .FormError--errorDiv {
+    [class*='FormError--errorDiv'] {
       display: none !important;
     }
   }
diff --git a/web/src/components/NewSpaceModalButton/NewSpaceModalButton.module.scss b/web/src/components/NewSpaceModalButton/NewSpaceModalButton.module.scss
index c27c477aad..4ab1c12ffe 100644
--- a/web/src/components/NewSpaceModalButton/NewSpaceModalButton.module.scss
+++ b/web/src/components/NewSpaceModalButton/NewSpaceModalButton.module.scss
@@ -30,7 +30,7 @@
       min-width: 214px;
     }
 
-    .menuItem {
+    [class*='menuItem'] {
       max-width: fit-content;
     }
   }
@@ -125,7 +125,7 @@
 
 .checkbox {
   :global {
-    .Tooltip--acenter {
+    [class*='Tooltip--acenter'] {
       opacity: 0.7 !important;
     }
     .bp3-control-indicator {
@@ -163,7 +163,7 @@
     .bp3-form-helper-text {
       margin-top: unset !important;
     }
-    .FormError--errorDiv {
+    [class*='FormError--errorDiv'] {
       display: none !important;
     }
   }
diff --git a/web/src/components/PluginsPanel/PluginsPanel.module.scss b/web/src/components/PluginsPanel/PluginsPanel.module.scss
index 2c96212c20..3e164e83fe 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.module.scss
+++ b/web/src/components/PluginsPanel/PluginsPanel.module.scss
@@ -40,7 +40,7 @@
   height: calc(100% - var(--spacing-large) - var(--spacing-xxlarge));
   width: 100%;
   :global {
-    .FormikForm--main {
+    [class*='FormikForm--main'] {
       height: 100%;
       & > div {
         height: 100%;
diff --git a/web/src/pages/Home/Home.module.scss b/web/src/pages/Home/Home.module.scss
index 8b57aa9750..94680cc3d5 100644
--- a/web/src/pages/Home/Home.module.scss
+++ b/web/src/pages/Home/Home.module.scss
@@ -37,7 +37,7 @@
 
 .bigButton {
   :global {
-    .SplitButton--splitButton {
+    [class*='SplitButton--splitButton'] {
       > .bp3-button {
         .bp3-button-text {
           font-size: 16px !important;
diff --git a/web/src/pages/PullRequest/CodeOwners/CodeOwnersOverview.module.scss b/web/src/pages/PullRequest/CodeOwners/CodeOwnersOverview.module.scss
index c4490cc9cf..9969dc4afb 100644
--- a/web/src/pages/PullRequest/CodeOwners/CodeOwnersOverview.module.scss
+++ b/web/src/pages/PullRequest/CodeOwners/CodeOwnersOverview.module.scss
@@ -112,7 +112,7 @@
   }
 
   :global {
-    .TableV2--header {
+    [class*='TableV2--header'] {
       border-bottom: 1px solid var(--grey-100) !important;
       padding-top: var(--spacing-small) !important;
       padding-left: var(--spacing-medium) !important;
@@ -128,7 +128,7 @@
 
 .ownerContainer {
   :global {
-    .Avatar--Avatar {
+    [class*='Avatar--Avatar'] {
       cursor: unset !important;
       &:first-child {
         margin-left: unset !important;
diff --git a/web/src/pages/Repository/RepositoryContent/FileContent/FileContent.module.scss b/web/src/pages/Repository/RepositoryContent/FileContent/FileContent.module.scss
index 038b8beb5f..e552509a40 100644
--- a/web/src/pages/Repository/RepositoryContent/FileContent/FileContent.module.scss
+++ b/web/src/pages/Repository/RepositoryContent/FileContent/FileContent.module.scss
@@ -61,10 +61,10 @@
   padding: var(--spacing-xlarge) var(--spacing-xlarge) 0 var(--spacing-xlarge) !important;
 
   :global {
-    .TableV2--row {
+    [class*='TableV2--row'] {
       height: 45px !important;
     }
-    .TableV2--row:last-child {
+    [class*='TableV2--row']:last-child {
       border-bottom-left-radius: 4px !important;
     }
   }
diff --git a/web/src/pages/Repository/RepositoryContent/FolderContent/FolderContent.module.scss b/web/src/pages/Repository/RepositoryContent/FolderContent/FolderContent.module.scss
index e1d5a7fd7b..c689520f87 100644
--- a/web/src/pages/Repository/RepositoryContent/FolderContent/FolderContent.module.scss
+++ b/web/src/pages/Repository/RepositoryContent/FolderContent/FolderContent.module.scss
@@ -19,7 +19,7 @@
 
   .table {
     background-color: var(--white) !important;
-    :global(.TableV2--row:last-child) {
+    :global([class*='TableV2--row']:last-child) {
       border-bottom-left-radius: 4px !important;
       border-bottom-right-radius: 4px !important;
     }
@@ -104,7 +104,7 @@
 .commitContainer {
   :global {
     .bp3-popover-target {
-      .StyledProps--font {
+      [class*='StyledProps--font'] {
         color: var(--grey-600) !important;
       }
     }
diff --git a/web/src/pages/RepositorySettings/RepositorySettings.module.scss b/web/src/pages/RepositorySettings/RepositorySettings.module.scss
index f04d046fb8..cd0c93a2cd 100644
--- a/web/src/pages/RepositorySettings/RepositorySettings.module.scss
+++ b/web/src/pages/RepositorySettings/RepositorySettings.module.scss
@@ -91,7 +91,7 @@
 }
 
 .radioContainer {
-  :global(.RadioButton--radio) {
+  :global([class*='RadioButton--radio']) {
     display: flex;
     align-items: center;
   }
@@ -139,7 +139,7 @@
 }
 
 .editContainer {
-  :global(.TextInput--main) {
+  :global([class*='TextInput--main']) {
     margin-bottom: unset !important;
     font-size: 20px;
   }
diff --git a/web/src/pages/RepositorySettings/SecurityScanSettings/SecurityScanSettings.module.scss b/web/src/pages/RepositorySettings/SecurityScanSettings/SecurityScanSettings.module.scss
index 2c29809f27..b50c28ce8a 100644
--- a/web/src/pages/RepositorySettings/SecurityScanSettings/SecurityScanSettings.module.scss
+++ b/web/src/pages/RepositorySettings/SecurityScanSettings/SecurityScanSettings.module.scss
@@ -38,7 +38,7 @@
 
 .radioContainer {
   margin-top: var(--spacing-medium) !important;
-  :global(.RadioButton--radio) {
+  :global([class*='RadioButton--radio']) {
     display: flex;
     flex-direction: row !important;
     align-items: center;
diff --git a/web/src/pages/Search/Search.module.scss b/web/src/pages/Search/Search.module.scss
index cb62a13a2f..bd53367179 100644
--- a/web/src/pages/Search/Search.module.scss
+++ b/web/src/pages/Search/Search.module.scss
@@ -249,7 +249,7 @@
 }
 
 .noResultContainer {
-  :global(.NoDataCard--message) {
+  :global([class*='NoDataCard--message']) {
     display: none !important;
   }
 }
diff --git a/web/src/pages/SpaceAccessControl/SpaceAccessControl.module.scss b/web/src/pages/SpaceAccessControl/SpaceAccessControl.module.scss
index 3fefd2fd48..1f3a1711a2 100644
--- a/web/src/pages/SpaceAccessControl/SpaceAccessControl.module.scss
+++ b/web/src/pages/SpaceAccessControl/SpaceAccessControl.module.scss
@@ -28,7 +28,7 @@
 }
 
 .tableContainer {
-  :global(.TableV2--card) {
+  :global([class*='TableV2--card']) {
     box-shadow: 0px 0.5px 2px 0px rgba(96, 97, 112, 0.16), 0px 0px 1px 0px rgba(40, 41, 61, 0.08);
   }
 }
diff --git a/web/src/pages/SpaceSettings/SpaceSettings.module.scss b/web/src/pages/SpaceSettings/SpaceSettings.module.scss
index 84d755b64d..86f8773927 100644
--- a/web/src/pages/SpaceSettings/SpaceSettings.module.scss
+++ b/web/src/pages/SpaceSettings/SpaceSettings.module.scss
@@ -148,7 +148,7 @@
 
 .checkbox {
   :global {
-    .Tooltip--acenter {
+    [class*='Tooltip--acenter'] {
       opacity: 0.7 !important;
     }
     .bp3-control-indicator {
@@ -200,7 +200,7 @@
     .bp3-form-helper-text {
       margin-top: unset !important;
     }
-    .FormError--errorDiv {
+    [class*='FormError--errorDiv'] {
       display: none !important;
     }
   }
diff --git a/web/src/pages/UserProfile/UserProfile.module.scss b/web/src/pages/UserProfile/UserProfile.module.scss
index 3fa2fdce29..dc8b10085f 100644
--- a/web/src/pages/UserProfile/UserProfile.module.scss
+++ b/web/src/pages/UserProfile/UserProfile.module.scss
@@ -27,7 +27,7 @@
       box-shadow: 0px 0.5px 2px 0px rgba(96, 97, 112, 0.16), 0px 0px 1px 0px rgba(40, 41, 61, 0.08);
 
       :global {
-        .TableV2--row {
+        [class*='TableV2--row'] {
           padding: var(--spacing-4) var(--spacing-medium);
         }
       }
@@ -40,7 +40,7 @@
       min-height: 186px;
 
       :global {
-        .TextInput--main {
+        [class*='TextInput--main'] {
           margin-bottom: 0 !important;
         }
       }
diff --git a/web/src/pages/WebhookNew/WehookForm.module.scss b/web/src/pages/WebhookNew/WehookForm.module.scss
index daad16e53f..5e7ad40fcd 100644
--- a/web/src/pages/WebhookNew/WehookForm.module.scss
+++ b/web/src/pages/WebhookNew/WehookForm.module.scss
@@ -37,7 +37,7 @@
   margin-top: 20px !important;
 
   :global {
-    .RadioButton--radio {
+    [class*='RadioButton--radio'] {
       margin-top: 10px;
     }
   }