Merge pull request #960 from hmrc/SDT-959_messages_layout

Sdt 959 Messages pattern not spanning full width

CHANGELOG.md

@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Added the `mailto:` scheme to the email link on the design-system *About* page. [951](https://github.com/hmrc/assets-frontend/pull/951)
 - Fixed the `sign-out` link on the *Help users when we sign them out...* page examples [953](https://github.com/hmrc/assets-frontend/pull/953)
 - Fixed a couple of typos on the _opens in a new window or tab_ page [954](https://github.com/hmrc/assets-frontend/pull/954)
+- Fixed table layout issue on messages pattern full width [959](https://github.com/hmrc/assets-frontend/pull/959)
+
 ### Changed
 - Moved the header pattern to patterns and updated documentation [944](https://github.com/hmrc/assets-frontend/pull/944)
 - `node-git-versioning` plugin has been published to npm so we can depend on that version [#946](https://github.com/hmrc/assets-frontend/pull/946)

assets/patterns/messages/_messages.scss

@@ -4,11 +4,12 @@
   border-top: 1px solid #a1acb2;
 
   .message-inbox__list-item {
+    display: table-row;
     font-weight: bold;
     a:link{
       text-decoration: none;
     }
-    &.message-inbox__list-item--read {
+    &--read {
       background-color: #f8f8f8;
       font-weight: normal;
     }
@@ -18,8 +19,11 @@
     display: table-cell;
     padding: 20px 10px;
     border-bottom: 1px solid #a1acb2;
-    &.no-wrap {
+    &:last-child {
       white-space: nowrap;
+      text-align: right;
     }
   }
 }
+
+

assets/patterns/messages/messages-read.html

@@ -3,15 +3,15 @@ <h2 class="heading-medium">Messages</h2>
   <div class="message-inbox__list" role="list">
     <div class="message-inbox__list-item message-inbox__list-item--read" role="listitem"><span
       class="visually-hidden">read</span> <a class="message-inbox__block" href="/">Pub Moon under the water 5 - 7a Temple Place, Brighton BN3 7JB - Client: Mr A Client</a>
-      <span class="message-inbox__block no-wrap">29 March 2018</span>
+      <span class="message-inbox__block">29 March 2018</span>
     </div>
     <div class="message-inbox__list-item message-inbox__list-item--read" role="listitem"><span
       class="visually-hidden">read</span> <a class="message-inbox__block" href="/">Pub Moon under the water 5 - 7a Temple Place, Brighton BN3 7JB - Client: Mr A Client</a>
-      <span class="message-inbox__block no-wrap">24 February 2018</span>
+      <span class="message-inbox__block">24 February 2018</span>
     </div>
     <div class="message-inbox__list-item message-inbox__list-item--read" role="listitem"><span
       class="visually-hidden">read</span> <a class="message-inbox__block" href="/">Pub Moon under the water 5 - 7a Temple Place, Brighton BN3 7JB - Client: Mr A Client</a>
-      <span class="message-inbox__block no-wrap">4 January 2018</span>
+      <span class="message-inbox__block">4 January 2018</span>
     </div>
   </div>
 </div>