rm span breaking responsive table layout

Author: alexnuttall

frontend/src/__tests__/components/molecules/MessagePlansList.test.tsx

@@ -53,12 +53,10 @@ describe('MessagePlansList', () => {
       />
     );
 
-    expect(
-      screen.getByTestId('message-plans-list-lastEdited-date')
-    ).toHaveTextContent('8th Sep 2025');
+    const lastEditedCell = screen.getByTestId('message-plans-list-lastEdited');
 
-    expect(
-      screen.getByTestId('message-plans-list-lastEdited-time')
-    ).toHaveTextContent('13:00');
+    expect(lastEditedCell).toHaveTextContent('8th Sep 2025');
+
+    expect(lastEditedCell).toHaveTextContent('13:00');
   });
 });

frontend/src/__tests__/components/molecules/__snapshots__/MessagePlansList.test.tsx.snap

@@ -85,6 +85,7 @@ exports[`MessagePlansList matches snapshot when data is available 1`] = `
             </td>
             <td
               class="nhsuk-table__cell"
+              data-testid="message-plans-list-lastEdited"
               role="cell"
             >
               <span
@@ -93,17 +94,9 @@ exports[`MessagePlansList matches snapshot when data is available 1`] = `
               >
                 Last edited 
               </span>
-              <span
-                data-testid="message-plans-list-lastEdited-date"
-              >
-                8th Sep 2025
-              </span>
+              8th Sep 2025
               <br />
-              <span
-                data-testid="message-plans-list-lastEdited-time"
-              >
-                13:00
-              </span>
+              13:00
             </td>
           </tr>
         </tbody>

frontend/src/components/molecules/MessagePlansList/MessagePlansList.tsx

@@ -46,14 +46,10 @@ export const MessagePlansList = (props: MessagePlansListProps) => {
         </Link>
       </Table.Cell>
       <Table.Cell data-testid='message-plan-id-cell'>{plan.id}</Table.Cell>
-      <Table.Cell>
-        <span data-testid='message-plans-list-lastEdited-date'>
-          {format(`${plan.lastUpdated}`, 'do MMM yyyy')}
-        </span>
+      <Table.Cell data-testid='message-plans-list-lastEdited'>
+        {format(`${plan.lastUpdated}`, 'do MMM yyyy')}
         <br />
-        <span data-testid='message-plans-list-lastEdited-time'>
-          {format(`${plan.lastUpdated}`, 'HH:mm')}
-        </span>
+        {format(`${plan.lastUpdated}`, 'HH:mm')}
       </Table.Cell>
     </Table.Row>
   ));