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>
parse-community · Sep 2, 2021 · cbeaec0 · cbeaec0
1 parent 1603be9
commit cbeaec0
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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 {