+
diff --git a/components/waves/OpenGraphPreview.tsx b/components/waves/OpenGraphPreview.tsx
index d4bcfe11d6..628cca6a43 100644
--- a/components/waves/OpenGraphPreview.tsx
+++ b/components/waves/OpenGraphPreview.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { Fragment, type ReactElement, type ReactNode } from "react";
import Image from "next/image";
import Link from "next/link";
@@ -51,6 +51,7 @@ const IMAGE_KEYS = [
"secureUrl",
];
const IMAGE_COLLECTION_KEYS = ["images", "ogImages", "og_images", "thumbnails"];
+const LONG_UNBROKEN_SEGMENT_THRESHOLD = 32;
function readFirstString(
data: OpenGraphPreviewData | null | undefined,
@@ -135,6 +136,45 @@ function extractImageUrl(
return undefined;
}
+function wrapLongUnbrokenSegments(value: string | undefined): ReactNode {
+ if (!value) {
+ return value ?? "";
+ }
+
+ const tokens = value.split(/(\s+)/);
+ let mutated = false;
+ let offset = 0;
+
+ const nodes = tokens
+ .map((token) => {
+ if (!token) {
+ return null;
+ }
+
+ const key = `og-wrap-${offset}`;
+ offset += token.length;
+
+ const trimmed = token.trim();
+ if (trimmed.length >= LONG_UNBROKEN_SEGMENT_THRESHOLD) {
+ mutated = true;
+ return (
+
+ {token}
+
+ );
+ }
+
+ return
{token};
+ })
+ .filter((token): token is ReactElement => token !== null);
+
+ if (!mutated) {
+ return value;
+ }
+
+ return nodes;
+}
+
function extractDomainFromUrl(url: string | undefined): string | undefined {
if (!url) {
return undefined;
@@ -197,8 +237,10 @@ export function LinkPreviewCardLayout({
const relativeHref = getRelativeHref(href);
return (
-
-
{children}
+
);
@@ -232,7 +274,7 @@ export default function OpenGraphPreview({
return (
+ className="tw-w-full tw-rounded-xl tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900/40 tw-p-4">
@@ -256,7 +298,7 @@ export default function OpenGraphPreview({
return (
@@ -266,8 +308,8 @@ export default function OpenGraphPreview({
href={effectiveHref}
target={linkTarget}
rel={linkRel}
- className="tw-text-sm tw-font-semibold tw-text-iron-100 tw-no-underline tw-transition tw-duration-200 hover:tw-text-white">
- {domain ?? href}
+ className="tw-break-words tw-[overflow-wrap:anywhere] tw-text-sm tw-font-semibold tw-text-iron-100 tw-no-underline tw-transition tw-duration-200 hover:tw-text-white">
+ {wrapLongUnbrokenSegments(domain ?? href)}
@@ -278,7 +320,7 @@ export default function OpenGraphPreview({
return (
{imageUrl && (
@@ -304,19 +346,19 @@ export default function OpenGraphPreview({
{domain && (
- {domain}
+ {wrapLongUnbrokenSegments(domain)}
)}
- {title ?? domain ?? href}
+ className="tw-break-words tw-[overflow-wrap:anywhere] tw-text-lg tw-font-semibold tw-leading-snug tw-text-iron-100 tw-no-underline tw-transition tw-duration-200 hover:tw-text-white">
+ {wrapLongUnbrokenSegments(title ?? domain ?? href)}
{description && (
-
- {description}
+
+ {wrapLongUnbrokenSegments(description)}
)}