From 19444a8e5ad86fbb14e1a34efbbe4b4651b82362 Mon Sep 17 00:00:00 2001
From: Tobi Awe <oluwatobi.awe@nhs.net>
Date: Mon, 27 Jul 2026 16:01:50 +0100
Subject: [PATCH] date wrap fixed

---
 .../Styles/nhsuk/pages/mylearning.scss        | 14 ++++--
 .../Views/MyLearning/Badges.cshtml            | 44 +++++++++----------
 2 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/LearningHub.Nhs.WebUI/Styles/nhsuk/pages/mylearning.scss b/LearningHub.Nhs.WebUI/Styles/nhsuk/pages/mylearning.scss
index 67ac4e30..39c8cde0 100644
--- a/LearningHub.Nhs.WebUI/Styles/nhsuk/pages/mylearning.scss
+++ b/LearningHub.Nhs.WebUI/Styles/nhsuk/pages/mylearning.scss
@@ -229,6 +229,7 @@
     /* Text column */
     .badge-header__text-col {
         flex: 1 1 auto;
+        min-width: 0;
     }
 
 
@@ -245,11 +246,18 @@
 
     .badge-dates-row {
         display: flex;
+        //justify-content: space-between;
         align-items: center;
-        gap: 24px;
+        width: 100%;
+        gap: 12px;
+    }
+
+    .badge-dates-row > span {
+        white-space: nowrap;
     }
 
-    .badge-dates-separator {
-        flex: 0 0 1px;
+    .badge-expiry {
+        margin-left: auto;
+        text-align: right;
     }
 }
diff --git a/LearningHub.Nhs.WebUI/Views/MyLearning/Badges.cshtml b/LearningHub.Nhs.WebUI/Views/MyLearning/Badges.cshtml
index 40ba86e7..b946f514 100644
--- a/LearningHub.Nhs.WebUI/Views/MyLearning/Badges.cshtml
+++ b/LearningHub.Nhs.WebUI/Views/MyLearning/Badges.cshtml
@@ -75,27 +75,27 @@
 
             <!-- Right column: Main content -->
             <div class="nhsuk-grid-column-three-quarters">
-                    <div class="nhsuk-heading-l">
+                <div class="nhsuk-heading-l">
+                    <svg width="31" height="40" viewBox="0 0 31 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <svg width="31" height="40" viewBox="0 0 31 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <svg width="31" height="40" viewBox="0 0 31 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <g clip-path="url(#clip0_1279_20951)">
-                                    <path d="M22.2978 31.628V38.6523C22.2978 39.0299 21.2822 39.2093 20.735 38.929L15.979 36.4692C15.6155 36.2822 14.9746 36.286 14.6223 36.4804L10.3199 38.8617C9.78392 39.157 8.73828 38.985 8.73828 38.5963V29.3477" stroke="#007F3B" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" />
-                                    <path d="M30.1024 15.1421C30.1024 16.1851 28.2135 17.0038 27.9887 17.9832C27.7638 18.9626 29.1018 20.5477 28.6595 21.4561C28.2173 22.3645 26.1522 22.3009 25.5151 23.0972C24.878 23.8935 25.4102 25.8785 24.6081 26.5178C23.8061 27.157 21.9922 26.1925 21.0627 26.6411C20.1333 27.0897 19.7697 29.1009 18.7578 29.329C17.7459 29.557 16.5579 27.9009 15.5122 27.9009C14.4666 27.9009 13.2448 29.5533 12.2666 29.329C11.2885 29.1047 10.8762 27.0785 9.96173 26.6411C9.04727 26.2038 7.21459 27.1533 6.41631 26.5178C5.61803 25.8823 6.15022 23.8972 5.50934 23.0972C4.86847 22.2972 2.81467 22.3832 2.36869 21.4561C1.9227 20.529 3.26816 18.9925 3.03954 17.9832C2.81093 16.9738 0.925781 16.1888 0.925781 15.1421C0.925781 14.0953 2.81467 13.2804 3.03954 12.3009C3.26441 11.3215 1.92644 9.73646 2.36869 8.82805C2.81093 7.91964 4.87597 7.98319 5.51309 7.18693C6.15022 6.39067 5.61803 4.40562 6.42006 3.76637C7.22209 3.12712 9.03603 4.0916 9.96548 3.643C10.8949 3.19441 11.2585 1.18319 12.2704 0.955154C13.2823 0.727116 14.4703 2.38319 15.516 2.38319C16.5616 2.38319 17.7834 0.730855 18.7616 0.955154C19.7397 1.17945 20.152 3.20562 21.0665 3.643C21.9809 4.08039 23.8136 3.13085 24.6119 3.76637C25.4102 4.40188 24.878 6.38693 25.5189 7.18693C26.1597 7.98693 28.2135 7.90095 28.6595 8.82805C29.1055 9.75515 27.76 11.2916 27.9887 12.3009C28.2173 13.3103 30.1024 14.0953 30.1024 15.1421Z" fill="#F2F8FD" />
-                                    <path d="M30.1024 15.1421C30.1024 16.1851 28.2135 17.0038 27.9887 17.9832C27.7638 18.9626 29.1018 20.5477 28.6595 21.4561C28.2173 22.3645 26.1522 22.3009 25.5151 23.0972C24.878 23.8935 25.4102 25.8785 24.6081 26.5178C23.8061 27.157 21.9922 26.1925 21.0627 26.6411C20.1333 27.0897 19.7697 29.1009 18.7578 29.329C17.7459 29.557 16.5579 27.9009 15.5122 27.9009C14.4666 27.9009 13.2448 29.5533 12.2666 29.329C11.2885 29.1047 10.8762 27.0785 9.96173 26.6411C9.04727 26.2038 7.21459 27.1533 6.41631 26.5178C5.61803 25.8823 6.15022 23.8972 5.50934 23.0972C4.86847 22.2972 2.81467 22.3832 2.36869 21.4561C1.9227 20.529 3.26816 18.9925 3.03954 17.9832C2.81093 16.9738 0.925781 16.1888 0.925781 15.1421C0.925781 14.0953 2.81467 13.2804 3.03954 12.3009C3.26441 11.3215 1.92644 9.73646 2.36869 8.82805C2.81093 7.91964 4.87597 7.98319 5.51309 7.18693C6.15022 6.39067 5.61803 4.40562 6.42006 3.76637C7.22209 3.12712 9.03603 4.0916 9.96548 3.643C10.8949 3.19441 11.2585 1.18319 12.2704 0.955154C13.2823 0.727116 14.4703 2.38319 15.516 2.38319C16.5616 2.38319 17.7834 0.730855 18.7616 0.955154C19.7398 1.17945 20.152 3.20562 21.0665 3.643C21.9809 4.08039 23.8136 3.13085 24.6119 3.76637C25.4102 4.40188 24.878 6.38693 25.5189 7.18693C26.1597 7.98693 28.2135 7.90095 28.6595 8.82805C29.1055 9.75515 27.76 11.2916 27.9887 12.3009C28.2173 13.3103 30.1024 14.0953 30.1024 15.1421Z" stroke="#007F3B" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" />
-                                    <path d="M15.4 22.1539L8.23047 13.395L11.3374 8.79688H19.9424L22.8132 13.395L15.4 22.1539Z" fill="#F2F8FD" stroke="#007F3B" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
-                                    <path d="M15.4662 22.1539L12.1719 13.395L13.5998 8.79688H17.55L18.8655 13.395L15.4662 22.1539Z" fill="#F2F8FD" stroke="#007F3B" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
-                                    <path d="M8.53906 13.3281H20.2547" stroke="#007F3B" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
-                                </g>
-                                <defs>
-                                    <clipPath id="clip0_1279_20951">
-                                        <rect width="31" height="40" fill="white" />
-                                    </clipPath>
-                                </defs>
-                            </svg>
-
+                            <g clip-path="url(#clip0_1279_20951)">
+                                <path d="M22.2978 31.628V38.6523C22.2978 39.0299 21.2822 39.2093 20.735 38.929L15.979 36.4692C15.6155 36.2822 14.9746 36.286 14.6223 36.4804L10.3199 38.8617C9.78392 39.157 8.73828 38.985 8.73828 38.5963V29.3477" stroke="#007F3B" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" />
+                                <path d="M30.1024 15.1421C30.1024 16.1851 28.2135 17.0038 27.9887 17.9832C27.7638 18.9626 29.1018 20.5477 28.6595 21.4561C28.2173 22.3645 26.1522 22.3009 25.5151 23.0972C24.878 23.8935 25.4102 25.8785 24.6081 26.5178C23.8061 27.157 21.9922 26.1925 21.0627 26.6411C20.1333 27.0897 19.7697 29.1009 18.7578 29.329C17.7459 29.557 16.5579 27.9009 15.5122 27.9009C14.4666 27.9009 13.2448 29.5533 12.2666 29.329C11.2885 29.1047 10.8762 27.0785 9.96173 26.6411C9.04727 26.2038 7.21459 27.1533 6.41631 26.5178C5.61803 25.8823 6.15022 23.8972 5.50934 23.0972C4.86847 22.2972 2.81467 22.3832 2.36869 21.4561C1.9227 20.529 3.26816 18.9925 3.03954 17.9832C2.81093 16.9738 0.925781 16.1888 0.925781 15.1421C0.925781 14.0953 2.81467 13.2804 3.03954 12.3009C3.26441 11.3215 1.92644 9.73646 2.36869 8.82805C2.81093 7.91964 4.87597 7.98319 5.51309 7.18693C6.15022 6.39067 5.61803 4.40562 6.42006 3.76637C7.22209 3.12712 9.03603 4.0916 9.96548 3.643C10.8949 3.19441 11.2585 1.18319 12.2704 0.955154C13.2823 0.727116 14.4703 2.38319 15.516 2.38319C16.5616 2.38319 17.7834 0.730855 18.7616 0.955154C19.7397 1.17945 20.152 3.20562 21.0665 3.643C21.9809 4.08039 23.8136 3.13085 24.6119 3.76637C25.4102 4.40188 24.878 6.38693 25.5189 7.18693C26.1597 7.98693 28.2135 7.90095 28.6595 8.82805C29.1055 9.75515 27.76 11.2916 27.9887 12.3009C28.2173 13.3103 30.1024 14.0953 30.1024 15.1421Z" fill="#F2F8FD" />
+                                <path d="M30.1024 15.1421C30.1024 16.1851 28.2135 17.0038 27.9887 17.9832C27.7638 18.9626 29.1018 20.5477 28.6595 21.4561C28.2173 22.3645 26.1522 22.3009 25.5151 23.0972C24.878 23.8935 25.4102 25.8785 24.6081 26.5178C23.8061 27.157 21.9922 26.1925 21.0627 26.6411C20.1333 27.0897 19.7697 29.1009 18.7578 29.329C17.7459 29.557 16.5579 27.9009 15.5122 27.9009C14.4666 27.9009 13.2448 29.5533 12.2666 29.329C11.2885 29.1047 10.8762 27.0785 9.96173 26.6411C9.04727 26.2038 7.21459 27.1533 6.41631 26.5178C5.61803 25.8823 6.15022 23.8972 5.50934 23.0972C4.86847 22.2972 2.81467 22.3832 2.36869 21.4561C1.9227 20.529 3.26816 18.9925 3.03954 17.9832C2.81093 16.9738 0.925781 16.1888 0.925781 15.1421C0.925781 14.0953 2.81467 13.2804 3.03954 12.3009C3.26441 11.3215 1.92644 9.73646 2.36869 8.82805C2.81093 7.91964 4.87597 7.98319 5.51309 7.18693C6.15022 6.39067 5.61803 4.40562 6.42006 3.76637C7.22209 3.12712 9.03603 4.0916 9.96548 3.643C10.8949 3.19441 11.2585 1.18319 12.2704 0.955154C13.2823 0.727116 14.4703 2.38319 15.516 2.38319C16.5616 2.38319 17.7834 0.730855 18.7616 0.955154C19.7398 1.17945 20.152 3.20562 21.0665 3.643C21.9809 4.08039 23.8136 3.13085 24.6119 3.76637C25.4102 4.40188 24.878 6.38693 25.5189 7.18693C26.1597 7.98693 28.2135 7.90095 28.6595 8.82805C29.1055 9.75515 27.76 11.2916 27.9887 12.3009C28.2173 13.3103 30.1024 14.0953 30.1024 15.1421Z" stroke="#007F3B" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" />
+                                <path d="M15.4 22.1539L8.23047 13.395L11.3374 8.79688H19.9424L22.8132 13.395L15.4 22.1539Z" fill="#F2F8FD" stroke="#007F3B" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+                                <path d="M15.4662 22.1539L12.1719 13.395L13.5998 8.79688H17.55L18.8655 13.395L15.4662 22.1539Z" fill="#F2F8FD" stroke="#007F3B" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+                                <path d="M8.53906 13.3281H20.2547" stroke="#007F3B" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+                            </g>
+                            <defs>
+                                <clipPath id="clip0_1279_20951">
+                                    <rect width="31" height="40" fill="white" />
+                                </clipPath>
+                            </defs>
                         </svg>
-                        <span>Badges and Certificates</span>
-                    </div>
+
+                    </svg>
+                    <span>Badges and Certificates</span>
+                </div>
 
                 <div class="nhsuk-u-padding-top-3">
                     @if (errorHasOccurred)
@@ -156,7 +156,7 @@
                             var d when d.Value.Date == today.AddDays(-1) => "Yesterday",
                             var d => d.Value.ToString("dd/MM/yyyy")
                         };
-
+                       
                         <div class="nhsuk-grid-column-one-half">
                             <div class="nhsuk-card nhsuk-card--clickable nhsuk-u-margin-bottom-4">
                                 <div class="nhsuk-card__content">
@@ -187,11 +187,11 @@
                                                     On: <strong>@activityText</strong>
                                                 </span>
 
-                                                <span class="badge-dates-separator"></span>
+                                              
 
                                                 @if (expiryDate != null)
                                                 {
-                                                    <span>
+                                                    <span class="badge-expiry">
                                                         Expiry:
                                                         <strong>@expiryDate.Value.ToString("dd/MM/yyyy")</strong>
                                                     </span>