"Section header with tabs" overflow in mobile view

[nick-kang]

What component (if applicable)

• URL for category: https://pro.chakra-ui.com/components/application/section-headers
• Component name: Section header with tabs

Describe the bug X-axis overflow on mobile view. Maybe change tabs to a dropdown or a list in mobile view?

Expected behavior No x-axis overflow

Screenshots

Browser/Device (if applicable)

• Chakra UI version [e.g. 1.1.6]
• Operating system: [e.g. iOS]
• Browser [e.g. chrome, safari]

Additional context Add any other context about the problem here.