fix: Fixes scrolling on results pages and pagination (#479)

* Makes search sections scrollable as in Table and Dashboard details

* Adjusting spacing on sidebars

* Fixing spacing

* Fixing spacing

amundsen_application/static/css/_animations.scss

@@ -15,14 +15,15 @@ $loading-curve: cubic-bezier(0.45, 0, 0.15, 1);
 
 .is-shimmer-animated {
   animation: $loading-duration shimmer $loading-curve infinite;
-  background-image: linear-gradient(
-    to right,
-    $gray10 0%,
-    $gray10 33%,
-    $gray5 50%,
-    $gray10 67%,
-    $gray10 100%
-  );
+  background-image:
+    linear-gradient(
+      to right,
+      $gray10 0%,
+      $gray10 33%,
+      $gray5 50%,
+      $gray10 67%,
+      $gray10 100%
+    );
   background-repeat: no-repeat;
   background-size: 300% 100%;
 }

amundsen_application/static/css/_layouts.scss

 @import 'variables';
+
 $resource-header-height: 84px;
+$aside-separation-space: 40px;
 
 .resource-detail-layout {
   height: calc(100vh - #{$nav-bar-height} - #{$footer-height});
@@ -93,8 +95,8 @@ $resource-header-height: 84px;
       border-right: 4px solid $divider;
       flex-basis: 600px;
       flex-shrink: 0;
-      overflow-y: scroll;
-      padding: 0 24px;
+      overflow-y: auto;
+      padding: 0 24px $aside-separation-space;
 
       > .banner {
         border: 1px solid $stroke;
@@ -110,8 +112,8 @@ $resource-header-height: 84px;
 
       .editable-section,
       .metadata-section {
+        margin-top: $aside-separation-space;
         display: inline-table;
-        margin-top: 40px;
         min-height: 70px;
       }
 
@@ -154,7 +156,6 @@ $resource-header-height: 84px;
   // Inner column layout
   .column-layout-2 {
     display: flex;
-    flex-basis: 100%;
 
     > .left-panel {
       flex-basis: 262px;

amundsen_application/static/js/components/DashboardPage/styles.scss

@@ -18,11 +18,6 @@
   }
 
   .image-preview {
-    margin-top: $spacer-4;
-    min-height: -webkit-fill-available;
-
-    img {
-      margin-bottom: $spacer-4;
-    }
+    margin-top: $spacer-1;
   }
 }

amundsen_application/static/js/components/SearchPage/SearchPanel/styles.scss

@@ -5,6 +5,7 @@
   display: flex;
   flex: 0 0 $search-panel-width;
   flex-direction: column;
+  overflow-y: scroll;
 
   .section {
     padding: 32px 24px 32px 32px;

amundsen_application/static/js/components/SearchPage/styles.scss

@@ -2,7 +2,7 @@
 
 .search-page {
   display: flex;
-  min-height: calc(100vh - #{$nav-bar-height + $footer-height});
+  height: calc(100vh - #{$nav-bar-height + $footer-height});
 
   .list-group {
     margin-top: 0;
@@ -11,6 +11,7 @@
   .search-results {
     flex-grow: 1;
     width: 0; // Temporary hack since list-items use width %
+    overflow-y: scroll;
   }
 
   @media (max-width: $screen-sm-max) {