diff --git a/src/app/components/Resume/ResumePDF/ResumePDFProfile.tsx b/src/app/components/Resume/ResumePDF/ResumePDFProfile.tsx index a01f522..0547c07 100644 --- a/src/app/components/Resume/ResumePDF/ResumePDFProfile.tsx +++ b/src/app/components/Resume/ResumePDF/ResumePDFProfile.tsx @@ -8,6 +8,7 @@ import { ResumePDFLink, ResumePDFSection, ResumePDFText, + addSoftBreaksToLongUnbrokenText, } from "components/Resume/ResumePDF/common"; import type { ResumeProfile } from "lib/redux/types"; @@ -85,12 +86,17 @@ export const ResumePDFProfile = ({ ...styles.flexRow, alignItems: "center", gap: spacing["1"], + maxWidth: "100%", }} > - - {value} - + + + + {addSoftBreaksToLongUnbrokenText(value)} + + + ); })} diff --git a/src/app/components/Resume/ResumePDF/common/index.tsx b/src/app/components/Resume/ResumePDF/common/index.tsx index 67608b2..0b4f953 100644 --- a/src/app/components/Resume/ResumePDF/common/index.tsx +++ b/src/app/components/Resume/ResumePDF/common/index.tsx @@ -4,6 +4,24 @@ import { styles, spacing } from "components/Resume/ResumePDF/styles"; import { DEBUG_RESUME_PDF_FLAG } from "lib/constants"; import { DEFAULT_FONT_COLOR } from "lib/redux/settingsSlice"; +const SOFT_BREAK_CHARACTER = "\u200B"; +const LONG_UNBROKEN_TEXT_LENGTH = 20; +const SOFT_BREAK_INTERVAL = 8; + +export const addSoftBreaksToLongUnbrokenText = (text: string) => { + return text + .split(/(\s+)/) + .map((segment) => { + if (segment.length < LONG_UNBROKEN_TEXT_LENGTH || /\s+/.test(segment)) { + return segment; + } + + const chunks = segment.match(new RegExp(`.{1,${SOFT_BREAK_INTERVAL}}`, "g")); +return chunks ? chunks.join(SOFT_BREAK_CHARACTER) : segment; + }) + .join(""); +}; + export const ResumePDFSection = ({ themeColor, heading, @@ -104,7 +122,7 @@ export const ResumePDFBulletList = ({ - {item} + {addSoftBreaksToLongUnbrokenText(item)} ))}