Issue #3502986 by utkarsh_33, chrisfromredfin, zetagraph, phenaproxima: Remove...

Issue #3502986 by utkarsh_33, chrisfromredfin, zetagraph, phenaproxima: Remove #project-browser from CSS and use more specific selectors

css/pb.css

@@ -1042,24 +1042,26 @@
   }
 }
 
-/* Prefixing #project-browser ensures more specific CSS styling. Without it, these styles are not applied. */
-#project-browser .pb-install_bulk_actions {
+.pb-layout__main .pb-install_bulk_actions {
   margin-top: 1rem;
-  animation: none;
   border-radius: 0.5rem;
 }
 
-#project-browser .install_button {
+.pb-layout__main .pb-install_bulk_actions[data-drupal-sticky-vbo="true"] {
+  animation: none;
+}
+
+.pb-install_bulk_actions .install_button {
   padding: 5px;
   color: var(--color-white);
   background-color: var(--color-blue-400);
 }
 
-#project-browser .install_button:hover {
+.pb-install_bulk_actions .install_button:hover {
   background-color: var(--color-blue-500);
 }
 
-#project-browser .install_button_common {
+.pb-install_bulk_actions button.install_button_common {
   height: 34px;
   margin-left: 20px;
   font-size: 0.79rem;
@@ -1098,7 +1100,7 @@
   display: flex;
 }
 
-#project-browser .clear_button {
+.pb-install_bulk_actions button.clear_button {
   margin-block: 0;
   margin-inline: 0;
   height: 34px;
@@ -1108,7 +1110,7 @@
 }
 /* @todo Remove this class, and its uses in the Svelte app, when we have a cleaner
  * way to ensure that it looks good in Gin. */
-#project-browser .views-bulk-actions-gin {
+.pb-layout__main .views-bulk-actions-gin {
   background: rgba(var(--gin-color-sticky-rgb), 0.9);
 }