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 <[email protected]>

Author: sadakchap

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

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 {

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 {