Fix top and bottom shadow of columns (#357)

A few bugs exist related to column shadows. 
Top shadow is shown when there are no elements
behind header and hidden when there are.
Bottom shadow sticks to the column as a user scrolls.

These are not the intended behaviour of the shadows
to indicate presence of elements behind above or
below columns respectively.

Let's update the CSS to correspond to
appropriate shadow behaviours.

src/app/issues-viewer/card-view/card-view.component.css

@@ -52,7 +52,26 @@ div.column-header .mat-card-header {
   position: relative;
 }
 
-/* Ref: https://css-scroll-shadows.vercel.app */
+/* Ref: https://lea.verou.me/blog/2012/04/background-attachment-local/ */
+.scroll-shadow {
+  background:
+    /* Shadow covers */ linear-gradient(white 30%, rgba(255, 255, 255, 0)),
+    linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
+    /* Shadows */ radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
+    radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
+  background:
+    /* Shadow covers */ linear-gradient(white 30%, rgba(255, 255, 255, 0)),
+    linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
+    /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
+    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) 0 100%;
+  background-repeat: no-repeat;
+  background-color: white;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+
+  /* Opera doesn't support this in the shorthand */
+  background-attachment: local, local, scroll, scroll;
+}
+
 .scrollable-container::before {
   pointer-events: none;
   content: '';
@@ -87,30 +106,6 @@ div.column-header .mat-card-header {
   display: none;
 }
 
-.scrollable-container-wrapper::before {
-  pointer-events: none;
-  content: '';
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 5px;
-  background-image: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.5), transparent);
-}
-
-.scrollable-container-wrapper::after {
-  pointer-events: none;
-  content: '';
-  position: absolute;
-  z-index: 1;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 5px;
-  background-image: radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.5), transparent);
-}
-
 .loading-spinner {
   display: flex;
   justify-content: center;

src/app/issues-viewer/card-view/card-view.component.html

@@ -3,7 +3,7 @@
     [ngTemplateOutlet]="getHeaderTemplate() || defaultHeader"
     [ngTemplateOutletContext]="{ $implicit: this.group }"
   ></ng-container>
-  <div class="scrollable-container-wrapper">
+  <div class="scrollable-container-wrapper scroll-shadow">
     <div class="scrollable-container">
       <div class="issue-pr-cards" *ngFor="let issue of this.issues$ | async; index as i">
         <app-issue-pr-card [issue]="issue" [filter]="issues.filter" [milestoneService]="milestoneService"></app-issue-pr-card>

src/app/shared/issue-pr-card/issue-pr-card.component.css

@@ -1,5 +1,6 @@
 .card {
   margin: 8px 0px 8px 0px;
+  background-color: transparent;
 }
 
 .mat-card {