diff --git a/src/app/core/services/phase.service.ts b/src/app/core/services/phase.service.ts
index ce6fa09b..9147593f 100644
--- a/src/app/core/services/phase.service.ts
+++ b/src/app/core/services/phase.service.ts
@@ -58,7 +58,7 @@ export class PhaseService {
 
   public sessionData = STARTING_SESSION_DATA; // stores session data for the session
 
-  constructor(private githubService: GithubService,  private repoUrlCacheService: RepoUrlCacheService, public logger: LoggingService) {}
+  constructor(private githubService: GithubService, private repoUrlCacheService: RepoUrlCacheService, public logger: LoggingService) {}
 
   /**
    * Sets the current main repository and additional repos if any.
diff --git a/src/app/core/services/repo-url-cache.service.ts b/src/app/core/services/repo-url-cache.service.ts
index c9a461dd..d786d6cc 100644
--- a/src/app/core/services/repo-url-cache.service.ts
+++ b/src/app/core/services/repo-url-cache.service.ts
@@ -1,12 +1,11 @@
-import { Injectable } from "@angular/core";
-import { AbstractControl } from "@angular/forms";
-import { Observable } from "rxjs";
+import { Injectable } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
 })
-
 export class RepoUrlCacheService {
   static readonly KEY_NAME = 'suggestions';
 
@@ -26,10 +25,9 @@ export class RepoUrlCacheService {
 
   getFilteredSuggestions(control: AbstractControl): Observable<string[]> {
     // Ref: https://v10.material.angular.io/components/autocomplete/overview
-    return control.valueChanges
-      .pipe(
-        startWith(''),
-        map(value => this.suggestions.filter(suggestion => suggestion.toLowerCase().includes(value.toLowerCase())))
-      );
+    return control.valueChanges.pipe(
+      startWith(''),
+      map((value) => this.suggestions.filter((suggestion) => suggestion.toLowerCase().includes(value.toLowerCase())))
+    );
   }
 }
diff --git a/src/app/issues-viewer/card-view/card-view.component.css b/src/app/issues-viewer/card-view/card-view.component.css
index 1da596b9..6542ee7d 100644
--- a/src/app/issues-viewer/card-view/card-view.component.css
+++ b/src/app/issues-viewer/card-view/card-view.component.css
@@ -64,8 +64,7 @@ div.column-header .mat-card-header {
   height: 6px;
   width: 100%;
   display: block;
-  background-image:
-    linear-gradient(to bottom, white 66%, transparent);
+  background-image: linear-gradient(to bottom, white 66%, transparent);
 }
 
 .scrollable-container::after {
@@ -77,8 +76,7 @@ div.column-header .mat-card-header {
   height: 6px;
   width: 100%;
   display: block;
-  background-image:
-    linear-gradient(to top, white 66%, transparent);
+  background-image: linear-gradient(to top, white 66%, transparent);
 }
 
 .scrollable-container-wrapper {
@@ -94,8 +92,7 @@ div.column-header .mat-card-header {
   left: 0;
   right: 0;
   height: 5px;
-  background-image:
-    radial-gradient(farthest-side at 50% 0, rgba(0,0,0, 0.5), transparent);
+  background-image: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.5), transparent);
 }
 
 .scrollable-container-wrapper::after {
@@ -107,8 +104,7 @@ div.column-header .mat-card-header {
   left: 0;
   right: 0;
   height: 5px;
-  background-image:
-    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0, 0.5), transparent);
+  background-image: radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.5), transparent);
 }
 
 .loading-spinner {
diff --git a/src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.css b/src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.css
index f361a38d..d660cd64 100644
--- a/src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.css
+++ b/src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.css
@@ -1,7 +1,16 @@
+::ng-deep.mat-menu-content:not(:empty) {
+  /* Override mat-menu-content's non-empty default CSS. */
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+}
+
+::ng-deep.mat-menu-panel {
+  /* Override mat-menu-panel's default CSS. */
+  width: 280px;
+  max-width: none !important;
+}
+
 .popup-container {
-  padding-top: 0px;
-  padding-left: 15px;
-  padding-right: 15px;
   flex-direction: column;
 }
 
@@ -10,13 +19,70 @@
 }
 
 .scroll-container {
-  height: 400px;
+  max-height: 400px;
   width: 100%;
   overflow-y: auto;
+  position: relative;
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
 
+/* Ref: https://css-scroll-shadows.vercel.app */
+.scroll-container::before {
+  pointer-events: none;
+  content: '';
+  position: absolute;
+  z-index: 2;
+  height: 7px;
+  width: 100%;
+  display: block;
+  background-image: linear-gradient(to bottom, white 66%, transparent);
+}
+
+.scroll-container::after {
+  pointer-events: none;
+  content: '';
+  position: sticky;
+  z-index: 2;
+  top: 100%;
+  height: 7px;
+  width: 100%;
+  display: block;
+  background-image: linear-gradient(to top, white 66%, transparent);
+}
+
+.scroll-container-wrapper {
+  position: relative;
+}
+
+.scroll-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.7), transparent);
+}
+
+.scroll-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.7), transparent);
+}
+
+.scroll-container::-webkit-scrollbar {
+  display: none; /* Hide scrollbar for Chrome, Safari and Opera */
+}
+
 .flexbox-container {
   display: flex;
   flex-direction: row;
@@ -24,12 +90,9 @@
   align-items: center;
 }
 
-.scroll-container::-webkit-scrollbar {
-  display: none; /* Hide scrollbar for Chrome, Safari and Opera */
-}
-
 .input-field {
-  width: 100%;
+  width: calc(100% - (2 * 15px)); /* To account for left and right padding. */
+  padding: 0 15px;
 }
 
 .list-option {
diff --git a/src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.html b/src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.html
index b6cd43cd..5668c430 100644
--- a/src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.html
+++ b/src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.html
@@ -15,34 +15,35 @@
 
     <button mat-button (click)="removeAllSelection()">Remove all</button>
 
-    <div class="scroll-container">
-      <mat-selection-list [(ngModel)]="selectedLabelNames" (selectionChange)="updateSelection()">
-        <mat-list-option
-          #option
-          *ngFor="let label of allLabels"
-          [value]="label.name"
-          [selected]="selectedLabelNames.includes(label.name)"
-          class="list-option"
-          [class.hidden]="filter(input.value, label.name)"
-        >
-          <div class="flexbox-container">
-            <button mat-icon-button *ngIf="!hiddenLabelNames.has(label.name)" (click)="hide(label.name); $event.stopPropagation()">
-              <mat-icon>visibility</mat-icon>
-            </button>
-            <button mat-icon-button *ngIf="hiddenLabelNames.has(label.name)" (click)="show(label.name); $event.stopPropagation()">
-              <mat-icon>visibility_off</mat-icon>
-            </button>
-
-            <mat-chip
-              [ngStyle]="labelService.setLabelStyle(label.color)"
-              [disabled]="hiddenLabelNames.has(label.name)"
-              (click)="simulateClick(option); $event.stopPropagation()"
-            >
-              {{ label.name }}
-            </mat-chip>
-          </div>
-        </mat-list-option>
-      </mat-selection-list>
+    <div class="scroll-container-wrapper">
+      <div class="scroll-container">
+        <mat-selection-list [(ngModel)]="selectedLabelNames" (selectionChange)="updateSelection()">
+          <mat-list-option
+            #option
+            *ngFor="let label of allLabels"
+            [value]="label.name"
+            [selected]="selectedLabelNames.includes(label.name)"
+            class="list-option"
+            [class.hidden]="filter(input.value, label.name)"
+          >
+            <div class="flexbox-container">
+              <button mat-icon-button *ngIf="!hiddenLabelNames.has(label.name)" (click)="hide(label.name); $event.stopPropagation()">
+                <mat-icon>visibility</mat-icon>
+              </button>
+              <button mat-icon-button *ngIf="hiddenLabelNames.has(label.name)" (click)="show(label.name); $event.stopPropagation()">
+                <mat-icon>visibility_off</mat-icon>
+              </button>
+              <mat-chip
+                [ngStyle]="labelService.setLabelStyle(label.color)"
+                [disabled]="hiddenLabelNames.has(label.name)"
+                (click)="simulateClick(option); $event.stopPropagation()"
+              >
+                {{ label.name }}
+              </mat-chip>
+            </div>
+          </mat-list-option>
+        </mat-selection-list>
+      </div>
     </div>
   </div>
 </mat-menu>
diff --git a/src/app/shared/repo-change-form/repo-change-form.component.html b/src/app/shared/repo-change-form/repo-change-form.component.html
index d090746d..91f31049 100644
--- a/src/app/shared/repo-change-form/repo-change-form.component.html
+++ b/src/app/shared/repo-change-form/repo-change-form.component.html
@@ -4,7 +4,7 @@ <h1 mat-dialog-title class="change-repo-form-title">Change repository</h1>
     <mat-form-field appearance="fill">
       <mat-label>Repository Location (Org/Repo)</mat-label>
       <input matInput [(ngModel)]="this.repoName" [formControl]="repoChangeForm" [matAutocomplete]="auto" />
-      <mat-autocomplete #auto="matAutocomplete" >
+      <mat-autocomplete #auto="matAutocomplete">
         <mat-option *ngFor="let suggestion of filteredSuggestions | async" [value]="suggestion">
           {{ suggestion }}
         </mat-option>