Fix organizer chip styling and add event details card scrollbar (#236)

This commit fixes the styling issues with the organizer chip avatars. It
also adds a scroll bar to the event details card so information is still
viewable if the text overflows the card.

frontend/src/app/event/widgets/event-detail-card/event-detail-card.widget.css

@@ -2,6 +2,25 @@
   padding: 4px 16px;
   margin: 0;
   height: 100%;
+  /* If content overflows card, add a scroll bar! */
+  overflow-y: auto;
+}
+
+/* Scroll Bar Styling */
+/* width */
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
 }
 
 #top-divider {
@@ -75,16 +94,19 @@
   margin: 0;
 }
 
-.organizer-chip-list {
-  display: flex;
-  flex-direction: row;
+.organizer-chips {
+  margin-bottom: 16px;
 }
 
 .organizer-chip {
-  margin: 8px 8px 16px 0px;
+  margin: 8px 8px 0px 0px;
 }
 
 .organizer-email-link {
   text-decoration: none;
   color: white;
+  display: flex;
+  justify-content: flex-start;
+  margin: 0;
+  padding: 0;
 }

frontend/src/app/event/widgets/event-detail-card/event-detail-card.widget.html

@@ -72,27 +72,31 @@
   <div
     class="organizers-information"
     *ngIf="profile && event.organizers.length > 0">
-    <p
+    <ng-container
       class="organizers-text"
       *ngIf="event.organizers.length > 1; else singleOrganizer">
       If you have any questions or concerns about this event, please contact one
       of the organizers below:
-    </p>
+    </ng-container>
     <ng-template #singleOrganizer>
       If you have any questions or concerns about this event, please contact the
       organizer:
     </ng-template>
     <br />
 
-    <mat-chip class="organizer-chip" *ngFor="let organizer of event.organizers">
-      <a class="organizer-email-link" href="mailto:{{ organizer.email }}">
+    <div class="organizer-chips">
+      <mat-chip
+        class="organizer-chip"
+        *ngFor="let organizer of event.organizers">
         <img
           *ngIf="organizer.github_avatar"
           matChipAvatar
           [src]="organizer.github_avatar" />
-        {{ organizer.first_name + ' ' + organizer.last_name }}
-      </a>
-    </mat-chip>
+        <a class="organizer-email-link" href="mailto:{{ organizer.email }}">
+          {{ organizer.first_name + ' ' + organizer.last_name }}
+        </a>
+      </mat-chip>
+    </div>
   </div>
 
   <!-- Register Button -->