Fix layout of content-list-component

src/app/components/creator/content-list/content-list.component.html

@@ -39,11 +39,12 @@
           <mat-panel-title>
               {{ content.subject }}
           </mat-panel-title>
-          <button mat-icon-button color="accent" (click)="editContent(content);$event.stopPropagation();">
+          <button mat-icon-button color="accent" (click)="editContent(content);$event.stopPropagation();"
+                  class="editButton">
             <mat-icon>create</mat-icon>
           </button>
           <button mat-icon-button color="warn" (click)="deleteContent(content);$event.stopPropagation();"
-                  class="deleteButton">
+                  class="deleteButton editButton">
             <mat-icon>delete_forever</mat-icon>
           </button>
         </mat-expansion-panel-header>

src/app/components/creator/content-list/content-list.component.scss

@@ -16,10 +16,13 @@ mat-panel-title {
   flex-basis: 0;
   align-items: center;
   font-size: medium;
+  margin-right: 5px;
 }
 
 mat-expansion-panel-header {
   background-color: #bbdefb !important;
+  padding-left: 3%;
+  padding-right: 3%;
 }
 
 .mat-expansion-panel-header-title {
@@ -39,8 +42,13 @@ h2 {
   }
 }
 
+.editButton {
+  width: 15%;
+  max-width: 60px;
+}
+
 .deleteButton {
-  margin-right: 15px;
+  margin-right: 4%;
 }
 
 mat-tooltip-component {

src/app/components/creator/content-list/content-list.component.ts

@@ -57,7 +57,7 @@ export class ContentListComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.labelMaxLength = innerWidth / 30;
+    this.labelMaxLength = innerWidth / 20;
     this.roomId = localStorage.getItem(`roomId`);
     this.roomService.getRoom(this.roomId).subscribe(room => {
       this.room = room;