Fix sender and receiver detail line breaks in journal table

[Copilot]

The journal table rendered sender and receiver details with \n inside interpolated strings, which does not produce visible line breaks in HTML. This updates those cells to render the detail on a separate line and adds focused coverage for the table output.

• Rendering

  • Replace newline-based string interpolation in ui/src/views/journal/Table.tsx with explicit JSX line breaks for senderDetail and receiverDetail.
  • Preserve the existing single-line rendering when no detail is present.

• Coverage

  • Add ui/src/views/journal/Table.test.tsx to verify:
    • detail values render in the same cell on a separate HTML line
    • no <br /> is rendered when detail values are absent

<td style={cellStyle}>
  {message.senderDetail ? (
    <>
      {message.sender}
      <br />
      ({message.senderDetail})
    </>
  ) : (
    message.sender
  )}
</td>

Original prompt

Please apply the following diffs and create a pull request.
Once the PR is ready, give it a title based on the messages of the fixes being applied.

[{"message":"Using `\\n` in string interpolation won't produce line breaks in HTML rendering. Consider using `<br />` elements or CSS styling to properly display the sender detail on a new line.","fixFiles":[{"filePath":"ui/src/views/journal/Table.tsx","diff":"diff --git a/ui/src/views/journal/Table.tsx b/ui/src/views/journal/Table.tsx\n--- a/ui/src/views/journal/Table.tsx\n+++ b/ui/src/views/journal/Table.tsx\n@@ -55,14 +55,26 @@\n             <tr key={message.id}>\n               <td>{dayjs(message.time).format(\"DD.MM.YYYY HH:mm:ss\")}</td>\n               <td style={cellStyle}>\n-                {message.senderDetail\n-                  ? `${message.sender}\\n(${message.senderDetail})`\n-                  : message.sender}\n+                {message.senderDetail ? (\n+                  <>\n+                    {message.sender}\n+                    <br />\n+                    ({message.senderDetail})\n+                  </>\n+                ) : (\n+                  message.sender\n+                )}\n               </td>\n               <td style={cellStyle}>\n-                {message.receiverDetail\n-                  ? `${message.receiver}\\n(${message.receiverDetail})`\n-                  : message.receiver}\n+                {message.receiverDetail ? (\n+                  <>\n+                    {message.receiver}\n+                    <br />\n+                    ({message.receiverDetail})\n+                  </>\n+                ) : (\n+                  message.receiver\n+                )}\n               </td>\n               <td style={cellStyle}>\n                 <div\n"}]},{"message":"Using `\\n` in string interpolation won't produce line breaks in HTML rendering. Consider using `<br />` elements or CSS styling to properly display the receiver detail on a new line.","fixFiles":[{"filePath":"ui/src/views/journal/Table.tsx","diff":"diff --git a/ui/src/views/journal/Table.tsx b/ui/src/views/journal/Table.tsx\n--- a/ui/src/views/journal/Table.tsx\n+++ b/ui/src/views/journal/Table.tsx\n@@ -55,14 +55,26 @@\n             <tr key={message.id}>\n               <td>{dayjs(message.time).format(\"DD.MM.YYYY HH:mm:ss\")}</td>\n               <td style={cellStyle}>\n-                {message.senderDetail\n-                  ? `${message.sender}\\n(${message.senderDetail})`\n-                  : message.sender}\n+                {message.senderDetail ? (\n+                  <>\n+                    {message.sender}\n+                    <br />\n+                    ({message.senderDetail})\n+                  </>\n+                ) : (\n+                  message.sender\n+                )}\n               </td>\n               <td style={cellStyle}>\n-                {message.receiverDetail\n-                  ? `${message.receiver}\\n(${message.receiverDetail})`\n-                  : message.receiver}\n+                {message.receiverDetail ? (\n+                  <>\n+                    {message.receiver}\n+                    <br />\n+                    ({message.receiverDetail})\n+                  </>\n+                ) : (\n+                  message.receiver\n+                )}\n               </td>\n               <td style={cellStyle}>\n                 <div\n"}]}]

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}