Add wrapping for challenge names

b01lers · Nov 9, 2024 · fd7687e · fd7687e
1 parent 05e65ad
commit fd7687e
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 6 deletions.
diff --git a/app/challenges/Challenge.tsx b/app/challenges/Challenge.tsx
@@ -18,7 +18,7 @@ export default function Challenge(props: Challenge & { solved: boolean }) {
     return (
         <div className="bg-black/50 px-6 py-4 rounded border border-tertiary backdrop-blur-sm">
             <div className="flex items-center gap-2">
-                <h3 className="font-semibold">
+                <h3 className="font-semibold [overflow-wrap:anywhere]">
                     {props.category}/{props.name}
                 </h3>
 

diff --git a/app/challenges/GridChallenge.tsx b/app/challenges/GridChallenge.tsx
@@ -15,7 +15,7 @@ export default function GridChallenge(props: Challenge & { solved: boolean }) {
                 className={'px-8 py-6 rounded border transition duration-150 text-center focus:outline-none focus:ring-2 backdrop-blur-sm ' + (props.solved ? 'bg-success/20 border-success hover:bg-success/30' : 'bg-black/50 border-tertiary hover:border-secondary')}
                 onClick={() => setOpen(true)}
             >
-                <h3 className="font-medium mb-2 flex gap-2 items-center justify-center">
+                <h3 className="font-medium mb-2 flex gap-2 items-center justify-center [overflow-wrap:anywhere]">
                     {props.solved && (
                         <BiCheck className="flex-none bg-success/40 p-0.5 mb-0.5 rounded-full" />
                     )}

diff --git a/app/challenges/GridChallengeModal.tsx b/app/challenges/GridChallengeModal.tsx
@@ -37,7 +37,7 @@ export default function GridChallengeModal(props: GridChallengeModalProps) {
 
                 <Tab.Panels>
                     <Tab.Panel>
-                        <h1 className="text-2xl text-center mb-2">
+                        <h1 className="text-2xl text-center mb-2 [overflow-wrap:anywhere]">
                             {props.challenge.name}
                         </h1>
                         <p className="text-lg text-center text-primary mb-6">

diff --git a/app/challenges/SolvesModal.tsx b/app/challenges/SolvesModal.tsx
@@ -19,10 +19,10 @@ export default function SolvesModal(props: SolvesModalProps) {
             isOpen={props.open}
             setIsOpen={props.setOpen}
         >
-            <h1 className="flex gap-2 items-center text-2xl font-bold mb-4">
+            <h1 className="flex gap-2 items-center text-2xl font-bold mb-4 [overflow-wrap:anywhere]">
                 Solves for {props.challenge.name}
 
-                <span className="text-sm px-2 py-0.5 bg-theme-bright/25 text-theme-bright font-semibold rounded-full">
+                <span className="flex-none text-sm px-2 py-0.5 bg-theme-bright/25 text-theme-bright font-semibold rounded-full">
                     {props.challenge.category}
                 </span>
             </h1>

diff --git a/app/profile/ProfileSolve.tsx b/app/profile/ProfileSolve.tsx
@@ -5,7 +5,7 @@ import { DateTime } from 'luxon';
 export default function ProfileSolve(props: Solve) {
     return (
         <div className="table-row">
-            <div className="table-cell px-2">
+            <div className="table-cell px-2 [overflow-wrap:anywhere]">
                 {props.name}
                 <span className="font-semibold bg-theme-bright/25 text-theme-bright px-2 py-1 text-xs rounded-full ml-2">
                     {props.category}