feat: apply Frame component to webhooks settings page

[PeerRich]

What does this PR do?

Applies the <Frame> component from coss ui to the /settings/developer/webhooks page, replacing the previous SettingsHeader wrapper with the standardized Frame component pattern. Also improves the badge presentation for webhook event triggers.

Reference: https://coss.com/ui/docs/components/frame

Changes:

• Replaced SettingsHeader with Frame component as the main container
• Added FrameHeader with FrameTitle and FrameDescription to include the section header and description inside the Frame
• Wrapped each individual webhook in its own <FramePanel> component for visual separation
• Wrapped empty state with <FramePanel> for consistent styling
• Removed unused classNames and SettingsHeader imports
• Fixed typo: items-centers → items-center

Updates since last revision:

• Implemented two-row badge limit with overflow tooltip for webhook event triggers
• Shows first 8 badges (approximately 2 rows), with remaining triggers displayed in a tooltip on hover via "+X more" badge
• Added improved spacing between webhook items (mt-2) and between header and first item (mb-2) for better visual hierarchy

Visual Demo

Webhooks page with Frame component and improved spacing

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A - no documentation changes needed.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

1. Navigate to /settings/developer/webhooks
2. Verify the Frame header displays the title "Webhooks" and description correctly
3. Verify the "+ New" button is positioned correctly in the header
4. Verify spacing between header and first webhook panel looks appropriate
5. Create multiple webhooks and verify each displays in its own separate FramePanel with proper spacing between them
6. If you have multiple teams, verify the team headers display correctly above their respective webhook panels
7. Delete all webhooks and verify the empty state displays correctly within a FramePanel
8. Create a webhook with many event triggers (>8) and verify:
   • Only the first 8 badges are shown
   • A "+X more" badge appears showing the count of remaining triggers
   • Hovering over the "+X more" badge shows a tooltip with the remaining trigger names

Checklist

• My code follows the style guidelines of this project
• I have checked if my changes generate no new warnings
• My PR is small (<500 lines and <10 files)

Human Review Checklist

• Verify each webhook appearing in its own FramePanel looks correct visually
• Verify spacing between header and first item (mb-2) looks appropriate
• Verify spacing between webhook items (mt-2) provides good visual separation
• Verify team headers display correctly between panels (when user has multiple teams)
• Verify the Frame component styling matches the expected coss ui design
• Verify the header layout (title, description, CTA button) is correct
• Verify empty state appearance is correct
• Verify the two-row badge limit (8 badges max) displays correctly
• Verify the "+X more" tooltip shows remaining triggers on hover
• Verify lastItem={true} is correct since each webhook is now in its own FramePanel (no border needed between items)

---

Link to Devin run

https://app.devin.ai/sessions/881e7eaa382243558fe8e2ccd632ee1d

Requested by

@PeerRich

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[dhairyashiil]

lgtm

[cubic-dev-ai]

No issues found across 2 files