Polish board approval card styling

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/ApprovalPayload.test.tsx

@@ -42,6 +42,7 @@ describe("ApprovalPayloadRenderer", () => {
             summary: "Board asked for approval before posting the frog.",
             recommendedAction: "Approve the frog reply.",
             nextActionOnApproval: "Post the frog comment on the issue.",
+            risks: ["The frog might be too powerful."],
             proposedComment: "(o)<",
           }}
         />,
@@ -52,6 +53,7 @@ describe("ApprovalPayloadRenderer", () => {
     expect(container.textContent).toContain("Board asked for approval before posting the frog.");
     expect(container.textContent).toContain("Approve the frog reply.");
     expect(container.textContent).toContain("Post the frog comment on the issue.");
+    expect(container.textContent).toContain("The frog might be too powerful.");
     expect(container.textContent).toContain("(o)<");
     expect(container.textContent).not.toContain("\"recommendedAction\"");
 
@@ -59,4 +61,28 @@ describe("ApprovalPayloadRenderer", () => {
       root.unmount();
     });
   });
+
+  it("can hide the repeated title when the card header already shows it", () => {
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(
+        <ApprovalPayloadRenderer
+          type="request_board_approval"
+          hidePrimaryTitle
+          payload={{
+            title: "Reply with an ASCII frog",
+            summary: "Board asked for approval before posting the frog.",
+          }}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("Board asked for approval before posting the frog.");
+    expect(container.textContent).not.toContain("TitleReply with an ASCII frog");
+
+    act(() => {
+      root.unmount();
+    });
+  });
 });