fix: Overflow wrap anywhere (#27)

yoki-labs · May 31, 2022 · 112e6ca · 112e6ca · vercel · May 31, 2022
1 parent 3db6900
commit 112e6ca
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/components/profile/card.tsx b/components/profile/card.tsx
@@ -20,7 +20,7 @@ export const Card = (props: { user: GuildedUser; bio: string | null }) => {
                     <hr className="mb-2 mt-4 border-guilded-gray border" />
                     <div className="flex shadow-inner">
                         {props.bio ? (
-                            <p className="w-full max-h-20 text-guilded-white text-left whitespace-pre-wrap linear-gradient">
+                            <p className="w-full max-h-20 text-guilded-white text-left whitespace-pre-wrap overflow-wrap-anywhere linear-gradient">
                                 {props.bio.length > 150 ? props.bio.slice(0, 150) + "..." : props.bio}
                             </p>
                         ) : (

diff --git a/pages/users/[id].tsx b/pages/users/[id].tsx
@@ -180,7 +180,7 @@ const UserPage: NextPage<Props> = ({ user, bio }) => {
                             <div className="flex">
                                 <div className="flex w-full max-h-48 overflow-y-auto overflow-x-hidden">
                                     {bio?.content ? (
-                                        <p className="text-clip whitespace-pre-wrap">{bioContent}</p>
+                                        <p className="text-clip whitespace-pre-wrap overflow-wrap-anywhere">{bioContent}</p>
                                     ) : (
                                         <p className="italic text-guilded-subtitle break-all">
                                             No content yet, but we&apos;re sure they&apos;re an amazing person!

diff --git a/styles/globals.css b/styles/globals.css
@@ -20,6 +20,10 @@ body::-webkit-scrollbar {
     mask-image: linear-gradient(black 55%, transparent 100%);
 }
 
+.overflow-wrap-anywhere {
+	overflow-wrap: anywhere;
+}
+
 /* width */
 ::-webkit-scrollbar {
     width: 5px;