Fix room list layout (setting width)

src/app/components/shared/room-list/room-list.component.html

@@ -7,27 +7,30 @@
 <div *ngIf="roomsWithRole && roomsWithRole.length != 0">
   <mat-expansion-panel [disabled]="true" id="matPanelHeader">
     <mat-expansion-panel-header>
-      <mat-panel-title class="headerTitle">Role</mat-panel-title>
       <mat-panel-title class="headerTitle">Session</mat-panel-title>
       <mat-panel-description class="headerTitle">ID</mat-panel-description>
+      <mat-panel-description class="roleTitle">Role</mat-panel-description>
+      <mat-panel-description class="headerTitle">&nbsp;</mat-panel-description>
     </mat-expansion-panel-header>
   </mat-expansion-panel>
   <mat-expansion-panel *ngFor="let room of roomsWithRole" class="matPanel">
     <mat-expansion-panel-header class="matPanelListHeader">
-      <button mat-flat-button routerLink="/{{ roleToString(room.role) }}/room/{{ room.shortId }}" (click)="setCurrentRoom(room.shortId)">
-        <mat-icon>input</mat-icon>
-      </button>
-      <mat-panel-title class="panelTitle" [ngSwitch]="room.role">
-        <mat-icon *ngSwitchCase="creatorRole">record_voice_over</mat-icon>
-        <mat-icon *ngSwitchCase="participantRole">face</mat-icon>
-        <mat-icon *ngSwitchCase="executiveModeratorRole">gavel</mat-icon>
-      </mat-panel-title>
       <mat-panel-title class="panelTitle">
         {{ room.name }}
       </mat-panel-title>
       <mat-panel-description class="panelTitle">
         {{ room.shortId.slice(0,4) }} {{  room.shortId.slice(4,8) }}
       </mat-panel-description>
+      <mat-panel-description class="roleTitle" [ngSwitch]="room.role">
+        <mat-icon *ngSwitchCase="creatorRole">record_voice_over</mat-icon>
+        <mat-icon *ngSwitchCase="participantRole">face</mat-icon>
+        <mat-icon *ngSwitchCase="executiveModeratorRole">gavel</mat-icon>
+      </mat-panel-description>
+      <mat-panel-description class="panelTitle" fxLayoutAlign="end end">
+        <button mat-flat-button routerLink="/{{ roleToString(room.role) }}/room/{{ room.shortId }}" (click)="setCurrentRoom(room.shortId)">
+          <mat-icon>input</mat-icon>
+        </button>
+      </mat-panel-description>
     </mat-expansion-panel-header>
     <p>
       {{ room.description }}

src/app/components/shared/room-list/room-list.component.scss

@@ -50,3 +50,8 @@ mat-card-title {
 mat-progress-spinner {
   margin-top: 30px;
 }
+
+.roleTitle {
+  width: 4%;
+  color: var(--on-surface)!important;
+}