Serval admin: Improve layout of draft job list for small screens (#3545)

Author: marksvc

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/draft-jobs.component.html

@@ -52,7 +52,7 @@
                   warning
                 }
               </mat-icon>
-              <span>{{ row.status }}</span>
+              <span class="status-label">{{ row.status }}</span>
             </div>
           </td>
         </ng-container>
@@ -134,12 +134,7 @@
         <ng-container matColumnDef="author">
           <th mat-header-cell *matHeaderCellDef>Author</th>
           <td mat-cell *matCellDef="let row">
-            <app-owner
-              [ownerRef]="row.userId"
-              [includeAvatar]="true"
-              [dateTime]="row.startTimeStamp"
-              [showTimeZone]="true"
-            ></app-owner>
+            <app-owner [ownerRef]="row.userId" [includeAvatar]="true"></app-owner>
           </td>
         </ng-container>
         <ng-container matColumnDef="buildDetails">

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/draft-jobs.component.scss

@@ -1,4 +1,5 @@
 @use 'src/variables' as sfColors;
+@use 'src/xforge-common/media-breakpoints/breakpoints' as *;
 
 .table-wrapper {
   overflow-x: auto;
@@ -9,14 +10,11 @@
   background-color: var(--sf-draft-jobs-table-row-background);
 }
 
-app-owner {
-  white-space: nowrap;
-}
-
 .build-id-link {
-  text-decoration: underline;
   cursor: pointer;
-  white-space: nowrap;
+  word-break: break-all;
+  font-family: monospace;
+  font-size: 0.7rem;
 
   &.disabled {
     color: var(--sf-draft-jobs-disabled-link-color);
@@ -29,6 +27,13 @@ app-owner {
   display: flex;
   align-items: center;
   gap: 8px;
+
+  @include media-breakpoint('<', lg) {
+    justify-content: center;
+    .status-label {
+      display: none;
+    }
+  }
 }
 
 .status-icon {