MAESTRO: improve responsive wrapping and layout

frontend/src/__tests__/report/HopChainVisualisation.test.tsx

@@ -88,4 +88,16 @@ describe("HopChainVisualisation", () => {
 
     expect(connectors.length).toBe(hopChain.length - 1);
   });
+
+  it("adds wrapping classes for long hostnames and IPs", () => {
+    const { container } = render(<HopChainVisualisation hopChain={hopChain} />);
+
+    const firstHop = getByTestId(container, "hop-chain-node-0");
+    const spanNodes = Array.from(firstHop.querySelectorAll("span"));
+    const hostnameNode = spanNodes.find((node) => node.textContent === "mail.sender.example");
+    const ipNode = spanNodes.find((node) => node.textContent === "192.0.2.10");
+
+    expect(hostnameNode?.className ?? "").toContain("break-words");
+    expect(ipNode?.className ?? "").toContain("break-all");
+  });
 });

frontend/src/__tests__/report/TestResultCard.test.tsx

@@ -127,4 +127,25 @@ describe("TestResultCard", () => {
     const errorIndicator = getByTestId(container, `test-result-error-${result.testId}`);
     expect(errorIndicator.textContent ?? "").toMatch(/SpamAssassin database timeout/);
   });
+
+  it("adds wrapping classes for long header values", () => {
+    const result = buildResult({
+      testId: 505,
+      headerValue: "X".repeat(200),
+    });
+    const { container } = render(<TestResultCard result={result} />);
+
+    const details = container.querySelector(`#test-result-details-${result.testId}`);
+    if (!details) {
+      throw new Error("Expected test details container to be rendered.");
+    }
+
+    const headerValue = details.querySelector("span.font-mono");
+    if (!headerValue) {
+      throw new Error("Expected header value to be rendered.");
+    }
+
+    expect(headerValue.className).toContain("break-words");
+    expect(headerValue.className).toContain("whitespace-pre-wrap");
+  });
 });