style(preprint-status-banner): Adjusted status banner for mobile and tablet

Author: rrromchIk

src/app/features/preprints/components/preprint-details/status-banner/status-banner.component.html

@@ -1,38 +1,47 @@
-<p-message styleClass="w-full" [icon]="'fas fa-' + iconClass()" [severity]="severity()">
+<p-message styleClass="w-full" [severity]="severity()">
   <ng-template #container>
-    <div class="banner-container w-full flex flex-row justify-content-between align-items-center font-bold text-base">
-      @if (!isWithdrawn()) {
-        {{ status() | translate | titlecase }}: {{ bannerContent() }}
+    <div class="banner-container w-full flex flex-row gap-2 align-items-start font-bold text-base">
+      <osf-icon class="pt-1" [iconClass]="'fas fa-' + iconClass()" />
 
-        <div>
-          @if (reviewerComment() && !provider().reviewsCommentsPrivate && !isPendingWithdrawal()) {
-            <p-button
-              [link]="true"
-              class="cursor-pointer"
-              (click)="feedbackDialogVisible = true"
-              [label]="'Show moderator feedback'"
-            />
+      <div class="flex-1 flex flex-column gap-1 justify-content-between align-items-start lg:flex-row">
+        @if (!isWithdrawn()) {
+          {{ status() | translate | titlecase }}: {{ bannerContent() }}
 
-            <p-dialog header="Moderator feedback" [modal]="true" draggable="false" [(visible)]="feedbackDialogVisible">
-              <div class="flex flex-column gap-2 align-items-start">
-                <p-tag [severity]="severity()"> {{ status() | translate | titlecase }}</p-tag>
+          <div>
+            @if (reviewerComment() && !provider().reviewsCommentsPrivate && !isPendingWithdrawal()) {
+              <p-button
+                [link]="true"
+                class="cursor-pointer"
+                (click)="feedbackDialogVisible = true"
+                [label]="'Show moderator feedback'"
+              />
 
-                <p>{{ reviewerComment() }}</p>
+              <p-dialog
+                [header]="'preprints.details.statusBanner.moderatorFeedback' | translate"
+                [modal]="true"
+                draggable="false"
+                [(visible)]="feedbackDialogVisible"
+              >
+                <div class="flex flex-column gap-2 align-items-start">
+                  <p-tag [severity]="severity()"> {{ status() | translate | titlecase }}</p-tag>
 
-                <div>
-                  @if (!provider().reviewsCommentsAnonymous) {
-                    <p>{{ reviewerName() }}</p>
-                  }
+                  <p>{{ reviewerComment() }}</p>
 
-                  <p>{{ provider().name }} {{ 'preprints.details.statusBanner.moderator' | translate }}</p>
+                  <div>
+                    @if (!provider().reviewsCommentsAnonymous) {
+                      <p>{{ reviewerName() }}</p>
+                    }
+
+                    <p>{{ provider().name }} {{ 'preprints.details.statusBanner.moderator' | translate }}</p>
+                  </div>
                 </div>
-              </div>
-            </p-dialog>
-          }
-        </div>
-      } @else {
-        {{ bannerContent() }}
-      }
+              </p-dialog>
+            }
+          </div>
+        } @else {
+          {{ bannerContent() }}
+        }
+      </div>
     </div>
   </ng-template>
 </p-message>

src/app/features/preprints/components/preprint-details/status-banner/status-banner.component.scss

@@ -1,3 +1,4 @@
 .banner-container {
   --p-button-padding-y: 0;
+  --p-button-padding-x: 0;
 }

src/app/features/preprints/components/preprint-details/status-banner/status-banner.component.ts

@@ -14,6 +14,7 @@ import { ReviewAction } from '@osf/features/moderation/models';
 import { ProviderReviewsWorkflow, ReviewsState } from '@osf/features/preprints/enums';
 import { PreprintProviderDetails } from '@osf/features/preprints/models';
 import { PreprintSelectors } from '@osf/features/preprints/store/preprint';
+import { IconComponent } from '@shared/components';
 
 const STATUS = Object({});
 STATUS[ReviewsState.Pending] = 'preprints.details.statusBanner.pending';
@@ -50,7 +51,7 @@ SEVERITIES[ReviewsState.Withdrawn] = 'warn';
 
 @Component({
   selector: 'osf-preprint-status-banner',
-  imports: [TranslatePipe, TitleCasePipe, Message, Dialog, Tag, Button],
+  imports: [TranslatePipe, TitleCasePipe, Message, Dialog, Tag, Button, IconComponent],
   templateUrl: './status-banner.component.html',
   styleUrl: './status-banner.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/assets/i18n/en.json

@@ -2052,7 +2052,8 @@
           "withdrawalRejected": "Your request to withdraw this {{documentType}} from the service has been denied by the moderator.",
           "withdrawn": "This {{documentType}} has been withdrawn."
         },
-        "moderator": "Moderator"
+        "moderator": "Moderator",
+        "moderatorFeedback": "Moderator Feedback"
       },
       "withdrawDialog": {
         "title": "Withdraw {{preprintWord}}",