Merge pull request #18 from savareyhano/text-overflow-fix

fix text overflow in social media link

Author: sauravhathi

components/preview/Preview.jsx

@@ -149,6 +149,10 @@ const Preview = () => {
                     target="_blank"
                     rel="noreferrer"
                     className="inline-flex items-center gap-1 social-media"
+                    // Prevent text overflowing, If the socialMedia.link string is longer than 32 characters, apply the wordWrap and display styles to this <a> tag.
+                    // wordWrap: "break-word" breaks the text onto the next line if it's too long,
+                    // display: "inline-block" is necessary for wordWrap to work on an inline element like <a>.
+                    style={socialMedia.link.length > 32 ? { wordWrap: "break-word", display: "inline-block" } : {}}
                   >
                     {icons.map((icon, index) => {
                       if (icon.name === socialMedia.socialMedia.toLowerCase()) {