add utility class for word-break: break-word

web/components/contract/contract-card.tsx

@@ -104,10 +104,7 @@ export function ContractCard(props: {
           contract={contract}
           className={'hidden md:inline-flex'}
         />
-        <p
-          className="break-words font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2"
-          style={{ /* For iOS safari */ wordBreak: 'break-word' }}
-        >
+        <p className="break-anywhere font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2">
           {question}
         </p>
 

web/components/leaderboard.tsx

@@ -40,7 +40,7 @@ export function Leaderboard(props: {
               {users.map((user, index) => (
                 <tr key={user.id}>
                   <td>{index + 1}</td>
-                  <td style={{ maxWidth: 190 }}>
+                  <td className="max-w-[190px]">
                     <SiteLink className="relative" href={`/${user.username}`}>
                       <Row className="items-center gap-4">
                         <Avatar avatarUrl={user.avatarUrl} size={8} />

web/components/linkify.tsx

@@ -38,10 +38,7 @@ export function Linkify(props: { text: string; gray?: boolean }) {
     )
   })
   return (
-    <span
-      className="break-words"
-      style={{ /* For iOS safari */ wordBreak: 'break-word' }}
-    >
+    <span className="break-anywhere">
       {text.split(regex).map((part, i) => (
         <Fragment key={i}>
           {part}

web/components/outcome-label.tsx

@@ -164,10 +164,7 @@ export function AnswerLabel(props: {
 
   return (
     <Tooltip text={truncated === text ? false : text}>
-      <span
-        style={{ wordBreak: 'break-word' }}
-        className={clsx('whitespace-pre-line break-words', className)}
-      >
+      <span className={clsx('break-anywhere whitespace-pre-line', className)}>
         {truncated}
       </span>
     </Tooltip>

web/components/site-link.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react'
 import Link from 'next/link'
 
 export const linkClass =
-  'z-10 break-words hover:underline hover:decoration-indigo-400 hover:decoration-2'
+  'z-10 break-anywhere hover:underline hover:decoration-indigo-400 hover:decoration-2'
 
 export const SiteLink = (props: {
   href: string
@@ -19,7 +19,6 @@ export const SiteLink = (props: {
         className={clsx(linkClass, className)}
         href={href}
         target={href.startsWith('http') ? '_blank' : undefined}
-        style={{ /* For iOS safari */ wordBreak: 'break-word' }}
         onClick={(e) => {
           e.stopPropagation()
           if (onClick) onClick()

web/components/user-page.tsx

@@ -148,10 +148,7 @@ export function UserPage(props: { user: User }) {
       <Col className="mx-4 -mt-6">
         <Row className={'flex-wrap justify-between gap-y-2'}>
           <Col>
-            <span
-              className="text-2xl font-bold"
-              style={{ wordBreak: 'break-word' }}
-            >
+            <span className="break-anywhere text-2xl font-bold">
               {user.name}
             </span>
             <span className="text-gray-500">@{user.username}</span>

web/tailwind.config.js

@@ -56,6 +56,10 @@ module.exports = {
             display: 'none',
           },
         },
+        '.break-anywhere': {
+          'overflow-wrap': 'anywhere',
+          'word-break': 'break-word', // for Safari
+        },
       })
     }),
   ],