From cbeaec0e8365447a97ef5a30ae2f6e8a91f965f2 Mon Sep 17 00:00:00 2001
From: Prerna Mehra <aliceprerna@gmail.com>
Date: Thu, 2 Sep 2021 23:22:55 +0530
Subject: [PATCH] Improve ui for array of pointer field (#1776)

* improve ui for array of pointer field

* Updated changelog.md

* Update CHANGELOG.md

Co-authored-by: Manuel <5673677+mtrezza@users.noreply.github.com>
---
 CHANGELOG.md                                    |  1 +
 src/components/BrowserCell/BrowserCell.react.js |  6 +++---
 src/components/BrowserCell/BrowserCell.scss     | 10 +++++++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d5ebef30ac..68974f493f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 - fix: date cell value not selected on double clicks (fn-faisal) [#1730](https://github.com/parse-community/parse-dashboard/pull/1730)
 
 ## Fixes
+- Fixed UI for a field containing an array of pointers (Prerna Mehra) [#1776](https://github.com/parse-community/parse-dashboard/pull/1776)
 - Fixed bug when editing or copying a field containing an array of pointers [#1770](https://github.com/parse-community/parse-dashboard/issues/1770) (Prerna Mehra) [#1771](https://github.com/parse-community/parse-dashboard/pull/1771)
 
 # 2.2.0
diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index cfd1d329d2..ccf8da4f2f 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -281,12 +281,12 @@ export default class BrowserCell extends Component {
             />
           );
         });
-        content = <ul>
-          { array.map( a => <li>{a}</li>) }
+        content = <ul className={styles.hasMore}>
+          {array.map( a => <li>{a}</li>)}
         </ul>
         this.copyableValue = JSON.stringify(value);
         if ( array.length > 1 ) {
-          classes.push(styles.hasMore);
+          classes.push(styles.removePadding);
         }
       }
       else {
diff --git a/src/components/BrowserCell/BrowserCell.scss b/src/components/BrowserCell/BrowserCell.scss
index b90ae7ea53..c435998ea5 100644
--- a/src/components/BrowserCell/BrowserCell.scss
+++ b/src/components/BrowserCell/BrowserCell.scss
@@ -40,11 +40,19 @@
   height: auto;
   max-height: 25px;
   overflow-y: scroll;
+  padding-right: 3px;
+  & > li {
+    margin-bottom: 2px;
+  }
+}
+
+.removePadding {
+  padding-right: 3px !important;
 }
 
 .hasMore::-webkit-scrollbar {
   -webkit-appearance: none!important;
-  width: 7px!important;
+  width: 6px!important;
 }
 
 .hasMore::-webkit-scrollbar-thumb {