Fixed mouse click issue where it does not select an object in Browser unless the pointer is over the object. Fixes #4180

docs/en_US/release_notes_4_21.rst

@@ -36,6 +36,7 @@ Bug fixes
 | `Issue #3947 <https://redmine.postgresql.org/issues/3947>`_ -  Fixed copy-paste row issues in View/Edit Data.
 | `Issue #3972 <https://redmine.postgresql.org/issues/3972>`_ -  Modified keyboard shortcuts in Query Tool for OSX native support.
 | `Issue #3988 <https://redmine.postgresql.org/issues/3988>`_ -  Fixed cursor disappeared issue in the query editor for some of the characters when zoomed out.
+| `Issue #4108 <https://redmine.postgresql.org/issues/4108>`_ -  Fixed mouse click issue where it does not select an object in Browser unless the pointer is over the object.
 | `Issue #4206 <https://redmine.postgresql.org/issues/4206>`_ -  Ensure that the grant wizard should be closed on pressing the ESC key.
 | `Issue #4292 <https://redmine.postgresql.org/issues/4292>`_ -  Added dark mode support for the configuration dialog on Windows/macOS runtime.
 | `Issue #4440 <https://redmine.postgresql.org/issues/4440>`_ -  Ensure the DROP statements in reverse engineered SQL are properly quoted for all objects.

web/pgadmin/browser/static/js/browser.js

@@ -98,6 +98,7 @@ define('pgadmin.browser', [
         },
         animateRoot: true,
         unanimated: false,
+        fullRow: true,
       });
 
       b.tree = $('#tree').aciTree('api');

web/pgadmin/preferences/static/js/preferences.js

@@ -400,6 +400,7 @@ define('pgadmin.preferences', [
             jTree.aciTree({
               selectable: true,
               expand: true,
+              fullRow: true,
               ajax: {
                 url: url_for('preferences.index'),
               },

web/pgadmin/static/scss/_aci_tree.overrides.scss

@@ -8,22 +8,33 @@
   border-style: none;
 }
 
-.aciTree {
+.aciTree, .aciTree.aciTreeFullRow {
     & .aciTreeButton, & .aciTreePush, & .aciTreeItem, & .aciTreeIcon, & .aciTreeText, & .aciTreeColumn {
         color: $color-fg;
     }
-}
 
-.aciTree .aciTreeLi {
+    .aciTreeLi {
       display: grid !important;
       cursor: pointer;
     }
-.aciTree .aciTreeText {
-	font-family: $font-family-primary;
-	font-size: $tree-font-size;
+
+    .aciTreeText {
+      font-family: $font-family-primary !important;
+      font-size: $tree-font-size !important;
     }
 
-.aciTree .aciTreeSelected > .aciTreeLine {
+    .aciTreeUl {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+    .aciTreeLine {
+      margin: unset !important;
+      border: unset !important;
+    }
+
+    .aciTreeSelected > .aciTreeLine {
+        background: unset !important;
         background-color: $tree-bg-selected !important;
         border-color: $color-primary-light;
         border-right: $active-border !important;
@@ -43,14 +54,18 @@
             color: $tree-fg-selected;
         }
     }
-.aciTree .aciTreeItem {
+
+    .aciTreeItem {
       white-space: nowrap !important;
     }
-.aciTree.aciTreeLoad {
+
+    &.aciTreeLoad {
       background: none;
     }
-.aciTree .aciTreeLine.aciTreeHover {
-  background-color: $tree-bg-hover;
+
+    .aciTreeLine.aciTreeHover {
+        background: unset !important;
+        background-color: $tree-bg-hover !important;
         -webkit-border-radius: none !important;
         -moz-border-radius: none !important;
         border-radius: none !important;
@@ -64,7 +79,7 @@
         }
     }
 
-.aciTree.aciTreeFocus {
+    &.aciTreeFocus {
 
         & .aciTreeFocus > .aciTreeLine  {
           background-color: $tree-bg-selected !important;
@@ -82,23 +97,23 @@
         }
     }
 
-.aciTree .aciTreeButton {
+    .aciTreeButton {
       background: none;
     }
-.aciTree .aciTreePush {
+
+    .aciTreePush {
       background: none;
       text-align: center;
+      vertical-align: middle;
       font-size: 0.85em;
     }
-.aciTree .aciTreeEntry,
-.aciTree .aciTreeBranch,
-.aciTree[dir=rtl] .aciTreeBranch {
+
+    .aciTreeEntry, .aciTreeBranch, &[dir=rtl] .aciTreeBranch {
         overflow:hidden;
         background: none !important;
     }
 
-
-.aciTree .aciTreeInode>.aciTreeLine .aciTreePush {
+    .aciTreeInode>.aciTreeLine .aciTreePush {
         &:before,
         &.aciTreeHover:before {
           background-position: 6px center !important;
@@ -109,14 +124,14 @@
         }
     }
 
-.aciTree .aciTreeLoad>.aciTreeLine .aciTreePush {
+    .aciTreeLoad>.aciTreeLine .aciTreePush {
         &:before,
         &.aciTreeHover:before {
           content: " " !important;
         }
     }
 
-.aciTree .aciTreeOpen >.aciTreeLine .aciTreePush {
+    .aciTreeOpen >.aciTreeLine .aciTreePush {
         &:before,
         &.aciTreeHover:before {
           background-position: -14px center !important;
@@ -127,10 +142,11 @@
         }
     }
 
-.aciTree .aciTreePush>span {
+    .aciTreePush>span {
         width: 15px;
         height: 15px;
         left: 2px;
         background: $loader-icon-small 0 0 no-repeat;
         background-color: inherit!important;
     }
+}