Footer does not display properly on small screens

[Peng-Yujie]

Description

The footer links get wrapped when the page is not wide enough.

Screenshots

Solution

flex-wrap for the outer div might be an easy solution for this matter. It works for me.

<div className="flex flex-wrap">
  {footerLinks.map((link, i) => (
    <p key={link} className="font-semibold text-gray text-xs">
      {link}{' '}
      {i !== footerLinks.length - 1 && (
        <span className="mx-2"> | </span>
      )}
    </p>
  ))}
</div>