MOBILE-4288 forum: Improve user groups UI

src/addons/mod/forum/components/index/index.html

@@ -93,7 +93,7 @@
                             [linkProfile]="false">
                         </core-user-avatar>
                         <div class="addon-mod-forum-discussion-author">
-                            <span *ngIf="discussion.userfullname">{{discussion.userfullname}}</span>
+                            <span *ngIf="discussion.userfullname" class="core-discussionusername">{{discussion.userfullname}}</span>
                             <p *ngIf="discussion.groupname" class="core-groupname">
                                 <ion-icon name="fas-users" [attr.aria-label]="'addon.mod_forum.group' | translate">
                                 </ion-icon>

src/addons/mod/forum/components/index/index.scss

@@ -6,6 +6,16 @@
         color: var(--core-star-color);
     }
 
+    .core-discussionusername {
+        font-size: 1.2em;
+    }
+
+    .core-groupname {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
     .addon-mod-forum-discussion.item {
         ion-label {
             margin-top: 4px;

src/addons/mod/forum/components/post/post.html

@@ -30,16 +30,18 @@
                             [courseId]="courseId">
                         </core-user-avatar>
                         <div class="addon-mod-forum-post-author">
-                            <span *ngIf="post.author && post.author.fullname">{{post.author.fullname}}</span>
-                            <p *ngIf="post.author && post.author.groups" class="core-groupname">
-                                <ng-container *ngFor="let group of post.author.groups">
+                            <span *ngIf="post.author && post.author.fullname" class="core-discussionusername">
+                                {{ post.author.fullname }}
+                            </span>
+                            <div *ngIf="post.author && post.author.groups">
+                                <p *ngFor="let group of post.author.groups" class="core-groupname">
                                     <ion-icon name="fas-users" [attr.aria-label]="'addon.mod_forum.group' | translate">
                                     </ion-icon>
                                     <core-format-text [text]="group.name" contextLevel="course" [contextInstanceId]="courseId"
                                         [wsNotFiltered]="true">
                                     </core-format-text>
-                                </ng-container>
-                            </p>
+                                </p>
+                            </div>
                             <p *ngIf="post.timecreated">{{post.timecreated * 1000 | coreFormatDate: "strftimerecentfull"}}</p>
                             <p *ngIf="!post.timecreated">
                                 <ion-icon name="fas-clock" aria-hidden="true"></ion-icon> {{ 'core.notsent' | translate }}

src/addons/mod/forum/components/post/post.scss

@@ -8,6 +8,16 @@
         color: var(--core-star-color);
     }
 
+    .core-discussionusername {
+        font-size: 1.2em;
+    }
+
+    .core-groupname {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
     ion-card-header .item {
 
         &.highlight::part(native) {