frontend/src/components/TagLink.tsx

@@ -34,6 +34,7 @@ const TagLink: FC<Props> = ({ tag,
 			      withCount = true,
 			      className,
 			      ...props }) => {
+  const textWrapClass = '[overflow-wrap:anywhere]'
   const spanClass = cn (
       `text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE }`,
       `dark:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE }`)
@@ -106,7 +107,9 @@ const TagLink: FC<Props> = ({ tag,
 	    </span>)}
 	{tag.matchedAlias != null && (
 	    <>
-	      <span className={cn (spanClass, className)} {...props}>
+	      <span
+		  className={cn (spanClass, textWrapClass, className)}
+		  {...props}>
 		{tag.matchedAlias}
 	      </span>
 	      <> → </>
@@ -115,12 +118,13 @@ const TagLink: FC<Props> = ({ tag,
 	 ? (
 	    <PrefetchLink
 		to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
-		className={cn (linkClass, className)}
+		className={cn (linkClass, textWrapClass, className)}
 		{...props}>
 	      {tag.name}
 	    </PrefetchLink>)
 	 : (
-	    <span className={cn (spanClass, className)}
+	    <span
+		  className={cn (spanClass, textWrapClass, className)}
 		  {...props}>
 	      {tag.name}
 	    </span>)}