feat: update scss and lettings log component styling

app/components/lettings_log_summary_component.html.erb

@@ -8,20 +8,14 @@
           <% end %>
         </h2>
         <% if log.tenancycode? or log.propcode? %>
-          <dl class="app-metadata app-metadata--inline">
+          <div class="app-metadata app-log-summary__details">
             <% if log.tenancycode? %>
-              <div class="app-metadata__item">
+                <div>Tenant <%= log.tenancycode %></div>
-                <dt class="app-metadata__term">Tenant</dt>
-                <dd class="app-metadata__definition"><%= log.tenancycode %></dd>
-              </div>
             <% end %>
             <% if log.propcode? %>
-              <div class="app-metadata__item">
+                <div>Property <%= log.propcode %></div>
-                <dt class="app-metadata__term">Property</dt>
-                <dd class="app-metadata__definition"><%= log.propcode %></dd>
-              </div>
             <% end %>
-          </dl>
+          </div>
         <% end %>
       </header>
       <% if log.needstype? or log.startdate? %>

app/frontend/styles/_log.scss

@@ -6,10 +6,11 @@
 .app-log-summary__header {
   align-items: baseline;
   display: flex;
+  margin-bottom: govuk-spacing(2);
 }
 
 .app-log-summary__title {
-  margin: 0 govuk-spacing(3) govuk-spacing(2) 0;
+  margin: auto govuk-spacing(3) auto 0;
   white-space: nowrap;
 }
 
@@ -21,4 +22,10 @@
   .app-log-summary__footer--actor {
     display: block;
   }
+
+  .app-log-summary__details {
+    word-break: break-all;
+    margin-top: auto;
+    margin-bottom: auto;
+  }
 }