fix: #763 fix table styling (#766)

* Use word-wrap class to break FOM name and expend the search table with container-fluid.

* Adjust search table column width

Author: ianliuwk1019

admin/src/app/search/search.component.html

@@ -1,6 +1,6 @@
 <form #searchForm="ngForm" (ngSubmit)="onSubmit()">
   <div class="top-container" style="overflow-y: hidden;">
-    <div class="container">
+    <div class="container-fluid">
       <div class="title-container">
         <div class="title-container__title">
           <h1 class="text-muted">Search FOMs</h1>
@@ -23,7 +23,7 @@ <h1 class="text-muted">Search FOMs</h1>
   </div>
 
   <div class="bottom-container scroll">
-    <div class="container" style="background: #f7f8fa; padding-bottom: 0;">
+    <div class="container-fluid" style="background: #f7f8fa; padding-bottom: 0;">
       <div class="row">
         <div class="form-group col-md-2">
           <label for="fomNumberInput" style="white-space: nowrap;">
@@ -99,7 +99,7 @@ <h1 class="text-muted">Search FOMs</h1>
       </div>
     </div>
 
-    <div class="container">
+    <div class="container-fluid">
       <div>
         <h2 *ngIf="searched && !searching && count == 0">
           <strong>No results found.</strong>
@@ -109,23 +109,23 @@ <h2 *ngIf="!searching && count > 0">
         </h2>
         <table class="table" *ngIf="count > 0" aria-label="Search Results">
           <thead>
-          <tr>
-            <th id="fomId" class="disp">FOM Number</th>
-            <th id="fomName" class="client">FOM Name</th>
-            <th id="projectPlanNumber" class="plan">Plan Number</th>
-            <th id="fomHolder" class="client">FOM Holder Name</th>
-            <th id="district">District</th>
-            <th id="fomStatus" class="status">FOM Status</th>
-            <th id="commentClosed">Commenting Closed Date</th>
-            <th id="actions" class="actions"></th>
-          </tr>
+            <tr>
+                <th id="fomId" class="disp">FOM Number</th>
+                <th id="fomName" class="fom-name">FOM Name</th>
+                <th id="projectPlanNumber" class="plan">Plan Number</th>
+                <th id="fomHolder" class="client">FOM Holder Name</th>
+                <th id="district">District</th>
+                <th id="fomStatus" class="status">FOM Status</th>
+                <th id="commentClosed" class="cc-date">Commenting Closed Date</th>
+                <th id="actions" class="actions"></th>
+            </tr>
           </thead>
           <ng-template ngFor let-project [ngForOf]="projects">
             <tr class="app-details">
               <td class="disp">
                 <strong>{{project.id }}</strong>
               </td>
-              <td
+              <td class="word-wrap"
                 [innerHTML]="project.name ? project.name : '<em>No FOM name on this File</em>'">
               </td>
               <td>
@@ -140,7 +140,7 @@ <h2 *ngIf="!searching && count > 0">
               <td>
                 {{project.workflowState? project.workflowState.description : 'Unknown'}}
               </td>
-              <td>
+              <td class="cc-date">
                 {{project.commentingClosedDate | date:'mediumDate'}}
               </td>
 

admin/src/app/search/search.component.scss

@@ -33,13 +33,6 @@ h2 {
   grid-auto-rows: minmax(0, auto);
 }
 
-// Search Container
-.search-container {
-  padding-top: 2rem;
-  padding-bottom: 1.5rem;
-  background: #f7f8fa;
-}
-
 .filter-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -169,16 +162,28 @@ $sr-table-row-bg: #f7f8fa;
 }
 
 .disp {
-  min-width: 5rem;
+  width: 7%;
   text-align: center;
 }
 
-.status, .plan {
-  width: 7rem;
+.fom-name {
+  width: 18%;
+}
+
+.cc-date {
+  width: 8%;
+  text-align: right;
+}
+
+.status {
+  width: 11%
+} 
+.plan {
+  width: 10%;
 }
 
 .actions {
-  width: 7rem;
+  width: 6rem;
   text-align: right;
   padding-top: 0;
   padding-bottom: 0;

admin/src/assets/styles/components/table.scss

@@ -47,9 +47,9 @@
     }
   }
 
-  tbody {
+  tbody, tr {
     td {
-      padding: 0.25rem 0.5rem;
+      padding: 0.25rem 0.3rem;
       vertical-align: top;
     }
   }

admin/src/assets/styles/layout/layout.scss

@@ -211,6 +211,11 @@ hr {
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
   }
+
+  .container-fluid {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
 }
 
 .bottom-container {
@@ -222,6 +227,11 @@ hr {
   .container {
     padding-bottom: 1.5rem;
   }
+
+  .container-fluid {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
 }
 
 .bold {
@@ -246,4 +256,8 @@ input, textarea {
 
 .spacer-height-1 {
     height: 1rem;
+}
+
+.word-wrap {
+  word-wrap: break-word;
 }