CLDC-2584 Update log summary component frontend (#2305)

* feat: don't wrap log IDs

* feat: divide log component into thirds not halves

* feat: update scss and lettings log component styling

* feat: update scss and sales log component styling

* refactor: erblinting

app/components/lettings_log_summary_component.html.erb

@@ -1,6 +1,6 @@
 <article class="app-log-summary">
   <div class="govuk-grid-row">
-    <div class="govuk-grid-column-one-half">
+    <div class="govuk-grid-column-two-thirds">
       <header class="app-log-summary__header">
         <h2 class="app-log-summary__title">
           <%= govuk_link_to lettings_log_path(log) do %>
@@ -8,20 +8,14 @@
           <% end %>
         </h2>
         <% if log.tenancycode? or log.propcode? %>
-          <dl class="app-metadata app-metadata--inline">
+          <div class="app-metadata">
             <% if log.tenancycode? %>
-              <div class="app-metadata__item">
-                <dt class="app-metadata__term">Tenant</dt>
-                <dd class="app-metadata__definition"><%= log.tenancycode %></dd>
-              </div>
+              <div class="app-log-summary__details">Tenant <%= log.tenancycode %></div>
             <% end %>
             <% if log.propcode? %>
-              <div class="app-metadata__item">
-                <dt class="app-metadata__term">Property</dt>
-                <dd class="app-metadata__definition"><%= log.propcode %></dd>
-              </div>
+              <div class="app-log-summary__details">Property <%= log.propcode %></div>
             <% end %>
-          </dl>
+          </div>
         <% end %>
       </header>
       <% if log.needstype? or log.startdate? %>
@@ -51,7 +45,7 @@
         </dl>
       <% end %>
     </div>
-    <footer class="govuk-grid-column-one-half app-log-summary__footer">
+    <footer class="govuk-grid-column-one-third app-log-summary__footer">
       <p class="govuk-body govuk-!-margin-bottom-2">
         <%= log_status %>
       </p>

app/components/sales_log_summary_component.html.erb

@@ -1,20 +1,17 @@
 <article class="app-log-summary">
   <div class="govuk-grid-row">
-    <div class="govuk-grid-column-one-half">
+    <div class="govuk-grid-column-two-thirds">
       <header class="app-log-summary__header">
         <h2 class="app-log-summary__title">
           <%= govuk_link_to sales_log_path(log) do %>
             Log <%= log.id %>
           <% end %>
         </h2>
-          <dl class="app-metadata app-metadata--inline">
-            <% if log.purchaser_code %>
-              <div class="app-metadata__item">
-                <dt class="app-metadata__term">Purchaser</dt>
-                <dd class="app-metadata__definition"><%= log.purchaser_code %></dd>
-              </div>
-            <% end %>
-          </dl>
+          <% if log.purchaser_code %>
+            <div class="app-metadata">
+              <div class="app-log-summary__details">Purchaser <%= log.purchaser_code %></div>
+            </div>
+          <% end %>
       </header>
       <p class="govuk-body govuk-!-margin-bottom-2">
         <% if log.ownership_scheme %>
@@ -41,7 +38,7 @@
         </dl>
       <% end %>
     </div>
-    <footer class="govuk-grid-column-one-half app-log-summary__footer">
+    <footer class="govuk-grid-column-one-third app-log-summary__footer">
       <p class="govuk-body govuk-!-margin-bottom-2">
         <%= log_status %>
       </p>

app/frontend/styles/_log.scss

@@ -4,12 +4,14 @@
 }
 
 .app-log-summary__header {
-  align-items: baseline;
   display: flex;
+  margin-bottom: govuk-spacing(2);
+  align-items: center;
 }
 
 .app-log-summary__title {
-  margin: 0 govuk-spacing(3) govuk-spacing(2) 0;
+  margin: auto govuk-spacing(3) auto 0;
+  white-space: nowrap;
 }
 
 @include govuk-media-query(tablet) {
@@ -20,4 +22,10 @@
   .app-log-summary__footer--actor {
     display: block;
   }
+
+  .app-log-summary__details {
+    word-break: break-all;
+    margin-top: auto;
+    margin-bottom: auto;
+  }
 }