From a5d701467731325cfef055f15dda26c9c88ff52e Mon Sep 17 00:00:00 2001
From: Max <max@users.noreply.github.com>
Date: Wed, 13 May 2026 02:08:51 +0000
Subject: [PATCH] fix: wrap IPv6 addresses in DNS records card to prevent
 visual truncation

Adds overflow-wrap: anywhere to the DNS card content area so long
IPv6 addresses wrap instead of being clipped.

Fixes #300
---
 src/client/components/Results/DnsRecords.tsx    | 1 +
 src/client/components/Results/TlsConnection.tsx | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/client/components/Results/DnsRecords.tsx b/src/client/components/Results/DnsRecords.tsx
index 485a5f96..e4deed61 100644
--- a/src/client/components/Results/DnsRecords.tsx
+++ b/src/client/components/Results/DnsRecords.tsx
@@ -7,6 +7,7 @@ const styles = `
     max-height: 50rem;
     overflow-x: hidden;
     overflow-y: auto;
+    overflow-wrap: anywhere;
   }
 `;
 
diff --git a/src/client/components/Results/TlsConnection.tsx b/src/client/components/Results/TlsConnection.tsx
index dee9efb9..92eb7780 100644
--- a/src/client/components/Results/TlsConnection.tsx
+++ b/src/client/components/Results/TlsConnection.tsx
@@ -1,5 +1,6 @@
 import { Card } from 'client/components/Form/Card';
 import Row from 'client/components/Form/Row';
+import colors from 'client/styles/colors';
 
 const yesNo = (v: boolean) => (v ? '✅ Yes' : '❌ No');
 
@@ -28,7 +29,12 @@ const TlsConnectionCard = (props: {
       {d.alpnProtocol && <Row lbl="ALPN" val={d.alpnProtocol} />}
       <Row lbl="Forward Secrecy" val={yesNo(!!d.forwardSecrecy)} />
       <Row lbl="Session Resumption" val={yesNo(!!d.sessionResumption)} />
-      <Row lbl="OCSP Stapling" val={yesNo(!!d.ocspStapled)} />
+      <Row lbl="OCSP Stapling" val="">
+        <span className="lbl">OCSP Stapling</span>
+        <span className="val" style={{ color: colors.info }}>
+          {d.ocspStapled ? 'ⓘ Present' : 'ⓘ Not Present'} — may impact visitor privacy
+        </span>
+      </Row>
       <Row
         lbl="Certificate Trust"
         val={d.authorized ? '✅ Trusted' : `❌ ${d.authError || 'Untrusted'}`}