From ab47ac5af3b650dee5fc61de31928d5a444d29bb Mon Sep 17 00:00:00 2001
From: natdeanlewissoftwire <nat.dean-lewis@softwire.com>
Date: Tue, 12 Mar 2024 09:17:22 +0000
Subject: [PATCH] feat: update scss and lettings log component styling

---
 .../lettings_log_summary_component.html.erb        | 14 ++++----------
 app/frontend/styles/_log.scss                      |  9 ++++++++-
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/components/lettings_log_summary_component.html.erb b/app/components/lettings_log_summary_component.html.erb
index 9e419c77d..f12aab7f8 100644
--- a/app/components/lettings_log_summary_component.html.erb
+++ b/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">
-                <dt class="app-metadata__term">Tenant</dt>
-                <dd class="app-metadata__definition"><%= log.tenancycode %></dd>
-              </div>
+                <div>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>Property <%= log.propcode %></div>
             <% end %>
-          </dl>
+          </div>
         <% end %>
       </header>
       <% if log.needstype? or log.startdate? %>
diff --git a/app/frontend/styles/_log.scss b/app/frontend/styles/_log.scss
index e0009a1d2..70cf0866f 100644
--- a/app/frontend/styles/_log.scss
+++ b/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;
+  }
 }