Focus ring not fully visible

[aliniacb]

What component (if applicable)

• URL for category: https://tailwindui.com/components/application-ui/page-examples/home-screens
• Component name: Sidebar component

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. Go to https://tailwindui.com/components/application-ui/page-examples/home-screens first example
2. Click on the sidebar component (user context menu)
3. Once clicked the focus ring appears and the upper part is cut

Expected behavior The focus ring should be fully visible

Screenshots

Browser/Device (if applicable)

• ALL

Additional context

Spacing the component with padding rather than margin fixes the issue

Current:

 <!-- Sidebar component, swap this element with another sidebar if you like -->
    <div class="mt-6 flex h-0 flex-1 flex-col overflow-y-auto">
     ...
    </div>

To fix:

 <!-- Sidebar component, swap this element with another sidebar if you like -->
    <div class="pt-6 flex h-0 flex-1 flex-col overflow-y-auto">
     ...
    </div>