TailwindUI Template Spotlight Footer Overflow - Needs 'flex-wrap'

[djsjr]

What version of Tailwind CSS are you using?

For example: v3.3.1

What build tool (or framework if it abstracts the build tool) are you using?

For example: Next.js latest

What version of Node.js are you using?

For example: n/a

What browser are you using?

All browsers

What operating system are you using?

macOS

Reproduction URL

https://spotlight.tailwindui.com

Describe your issue

Footer text overflows when text size too large, screen width too small, or number of links too great. Go to Spotlight example, increase page size, and narrow window to demonstrate. First noticed this on an iPhone which had slightly enlarged large text enabled on Safari for the readability of the user. Caused overflow and horizontal scroll (no good!). Added flex-wrap to innermost flex box containing page links to solve.

[reinink]

@djsjr Hey thanks for sharing this feedback! You're right, we could probably make the footer nav in this template a little more adaptable on mobile. I've just deployed an update to this template to improve this.

If you want to make the same changes in your own project, update the src/components/Footer.jsx file like this:

- <div className="flex gap-6 text-sm font-medium text-zinc-800 dark:text-zinc-200">
+ <div className="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-zinc-800 dark:text-zinc-200">

Thanks again! 🤙