From 9fd9ca2673ecd148af4882b3ab7b2d077afe7a0f Mon Sep 17 00:00:00 2001
From: Khushboo Vashi <khushboo.vashi@enterprisedb.com>
Date: Tue, 12 Oct 2021 17:53:38 +0530
Subject: [PATCH] Added support for indent guides in the browser tree. Fixes
 #4596

---
 docs/en_US/release_notes_6_1.rst              |  1 +
 .../static/scss/_pgadmin4-tree.overrides.scss | 21 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/docs/en_US/release_notes_6_1.rst b/docs/en_US/release_notes_6_1.rst
index 52191f6d8..1924e9191 100644
--- a/docs/en_US/release_notes_6_1.rst
+++ b/docs/en_US/release_notes_6_1.rst
@@ -9,6 +9,7 @@ This release contains a number of bug fixes and new features since the release o
 New features
 ************
 
+| `Issue #4596 <https://redmine.postgresql.org/issues/4596>`_ -  Added support for indent guides in the browser tree.
 | `Issue #6081 <https://redmine.postgresql.org/issues/6081>`_ -  Added support for advanced table fields like the foreign key, primary key in the ERD tool.
 | `Issue #6529 <https://redmine.postgresql.org/issues/6529>`_ -  Added index creation when generating SQL in the ERD tool.
 | `Issue #6657 <https://redmine.postgresql.org/issues/6657>`_ -  Added support for authentication via the webserver (REMOTE_USER).
diff --git a/web/pgadmin/static/scss/_pgadmin4-tree.overrides.scss b/web/pgadmin/static/scss/_pgadmin4-tree.overrides.scss
index 3851a16db..e483852e3 100644
--- a/web/pgadmin/static/scss/_pgadmin4-tree.overrides.scss
+++ b/web/pgadmin/static/scss/_pgadmin4-tree.overrides.scss
@@ -26,9 +26,28 @@
   align-items: center;
   white-space: nowrap;
   padding: 2px 0;
-  padding-left: 2px;
   cursor: pointer !important;
   color: $tree-text-fg !important;
+  &:before {
+    content: '';
+    background: $color-gray-light;
+    position: absolute;
+    width: 1px;
+    height: 100%;
+    box-shadow: -16px 0 0 0 $color-gray-light,
+      -32px 0 0 0 $color-gray-light,
+      -48px 0 0 0 $color-gray-light,
+      -64px 0 0 0 $color-gray-light,
+      -80px 0 0 0 $color-gray-light,
+      -96px 0 0 0 $color-gray-light,
+      -112px 0 0 0 $color-gray-light,
+      -128px 0 0 0 $color-gray-light,
+      -144px 0 0 0 $color-gray-light,
+      -160px 0 0 0 $color-gray-light,
+      -176px 0 0 0 $color-gray-light,
+      -192px 0 0 0 $color-gray-light,
+      -208px 0 0 0 $color-gray-light;
+  }
   &:hover, &.pseudo-active {
     background-color: $tree-bg-hover !important;
     color: $tree-fg-hover !important;