add space under last item in the list to be able to navigate to it via the dropdown

opentech/static_src/src/app/src/components/Listing/index.js

@@ -20,6 +20,10 @@ export default class Listing extends React.Component {
         column: PropTypes.string,
     };
 
+    componentDidUpdate() {
+        this.setLastItemHeight();
+    }
+
     renderListItems() {
         const {
             isError,
@@ -46,6 +50,8 @@ export default class Listing extends React.Component {
             );
         }
 
+        this.setLastItemHeight();
+
         return (
             <ul className={`listing__list listing__list--${column}`} ref={listRef}>
                 {items.map(v => renderItem(v))}
@@ -65,6 +71,14 @@ export default class Listing extends React.Component {
         );
     }
 
+    // set css custom prop to allow scrolling from dropdown to last item in the list
+    setLastItemHeight() {
+        const { listRef } = this.props;
+        if (listRef.current) {
+            document.documentElement.style.setProperty('--last-listing-item-height', listRef.current.lastElementChild.offsetHeight + 'px');
+        }
+    }
+
     render() {
         return (
             <div className="listing">

opentech/static_src/src/app/src/components/Listing/style.scss

@@ -25,6 +25,19 @@
             height: calc(100vh -  #{$listing-header-height});
         }
 
+        // ensures the last item will be at the top of the column after navigating to it via the dropdown
+        &--applications {
+            padding-bottom: calc(100vh - var(--last-listing-item-height) - #{$listing-header-height});
+
+            @include media-query(tablet-landscape) {
+                padding-bottom: calc(100vh - var(--header-admin-height) - var(--last-listing-item-height) - #{$listing-header-height});
+            }
+
+            @include media-query(laptop-short) {
+                padding-bottom: calc(100vh - var(--last-listing-item-height) - #{$listing-header-height});
+            }
+        }
+
         &.is-loading {
             padding: 20px;
             border-right: 2px solid $color--light-mid-grey;

opentech/static_src/src/sass/apply/abstracts/_variables.scss

 // sass-lint:disable no-color-keywords; no-color-hex
+// Set via JS
 :root {
     --header-admin-height: 0;
+    --last-listing-item-height: 0;
 }
 
 // Default