Adjust CSS Styles

src/app/components/creator/room-creator-page/room-creator-page.component.scss

@@ -50,10 +50,10 @@ mat-card-content > :first-child {
 }
 
 .room-short-id {
-  font-size: 14px;
+  font-size: larger;
   font-weight: bold;
   color: var(--on-surface) !important;
-  margin-top: 10%;
+  margin: 1em;
 }
 
 mat-grid-list {
@@ -99,9 +99,8 @@ mat-expansion-panel {
 }
 
 #copy {
-  margin-left: 10px;
-  width: 50px;
-  height: 55px;
+  width: 24px;
+  height: 24px;
 }
 
 .copy {
@@ -111,7 +110,7 @@ mat-expansion-panel {
 }
 
 .gavel {
-  margin: 5% 2% 0 0;
+  margin: 0.9em 0.25em 0 0;
   color: var(--on-surface);
 }
 

src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss

@@ -66,7 +66,7 @@ mat-card-content > :first-child {
   font-size: larger;
   font-weight: bold;
   color: var(--on-surface) !important;
-  margin: 5% 5% 0 0;
+  margin: 1em;
 }
 
 mat-grid-list {
@@ -130,7 +130,7 @@ mat-expansion-panel {
 }
 
 .gavel {
-  margin: 5% 2% 0 0;
+  margin: 0.9em 0.25em 0 0;
   color: var(--on-surface);
 }
 

src/app/components/participant/room-participant-page/room-participant-page.component.html

@@ -12,7 +12,7 @@
             <mat-icon *ngIf="moderationEnabled" class="gavel" matTooltip="{{ 'room-page.moderation-enabled' | translate }}">
               gavel
             </mat-icon>
-            <h3>
+            <h3 class="room-short-id">
               {{ 'room-page.session-id' | translate}}: {{ room.shortId }}
             </h3>
           </mat-card-subtitle>

src/app/components/participant/room-participant-page/room-participant-page.component.scss

@@ -91,10 +91,17 @@ mat-grid-tile {
 }
 
 .gavel {
-  margin: 5% 2% 0 0;
+  margin: 0.9em 0.25em 0 0;
   color: var(--on-surface);
 }
 
+.room-short-id {
+  font-size: larger;
+  font-weight: bold;
+  color: var(--on-surface) !important;
+  margin: 1em;
+}
+
 ::ng-deep .mat-badge-content {
   background: var(--secondary);
   color: var(--on-secondary);