Feat/666 667 668 669 mobile nav notifications webhook

[Barbie-Dev]

Summary

This PR implements four UX/frontend improvements focused on mobile responsiveness and component enhancements:

• Fix mobile nav link strip overflow in components/layout/navbar.tsx #667: Fix mobile nav link overflow on narrow viewports
• Constrain notification dropdown width on narrow viewports in notification-bell.tsx #668: Constrain notification dropdown width to prevent overflow
• Add truncation/wrap to webhook delivery-history rows to prevent overflow #669: Add truncation/wrapping to webhook delivery-history rows
• Add Storybook stories for components/ui/progress-bar.tsx #666: Create comprehensive Storybook stories for progress-bar component

All changes improve UX on constrained/mobile screens while maintaining visual integrity and accessibility.

Changes

1. Mobile Navigation Overflow Fix (#667)

File: components/layout/navbar.tsx

Fixed the mobile navigation row to handle overflow gracefully on extremely narrow viewports (under ~360px).

Changes:

• Wrapped navigation links in a scrollable container with overflow-x-auto
• Added whitespace-nowrap to link labels to prevent text wrapping
• Inner flex container ensures proper spacing and alignment
• Allows horizontal scrolling on very narrow screens instead of clipping

Benefits:

• Navigation remains accessible on ultra-narrow devices
• Graceful degradation without breaking layout
• Easy to verify by resizing viewport to <360px width

---

2. Notification Dropdown Width Constraint (#668)

File: components/layout/notification-bell.tsx

Constrained the notification dropdown to prevent overflow on narrow mobile devices.

Changes:

• Added max-w-[calc(100vw-2rem)] CSS class to the dropdown panel
• Maintains 1rem margin from viewport edges
• Preserves 320px (w-80) as the default width on larger screens
• Viewport width acts as a fallback constraint on narrow screens

Benefits:

• Dropdown never exceeds visible viewport width
• Notification content remains readable on mobile
• Seamless responsive behavior without layout shifts

---

3. Webhook Delivery History Row Text Handling (#669)

File: components/webhooks/webhook-settings.tsx

Improved text handling in the delivery history rows to prevent information loss on constrained layouts.

Changes:

• Added min-w-0 to the left section (icon + event type) to enable proper shrinking
• Added truncate utility to event type label for text truncation on overflow
• Changed parent container to use flex-wrap for responsive wrapping
• Added shrink-0 to right section (status code + time) to prevent it from shrinking
• Improved gap handling with gap-2 for consistent spacing

Benefits:

• No information gets unexpectedly cut off on mobile
• Event type truncates gracefully if too long
• Status code and timestamp always remain visible
• Flexible wrapping adapts to various viewport widths
• Easy to verify visually in narrow viewport

---

4. Progress Bar Component Storybook Stories (#666)

File: components/ui/progress-bar.stories.tsx (new file)

Created comprehensive Storybook stories for the progress bar component with multiple state demonstrations and edge case testing.

Story Coverage (15+ stories):

• Basic States: Empty (0%), Quarter (25%), Half (50%), Three-Quarters (75%), Complete (100%)
• Size Variants: Small, Default, Large with corresponding examples
• Effect Demonstrations: Indeterminate shimmer in all size variants
• Marker Functionality: Progress bar with secondary marker showing withdrawn portion
• Edge Cases:
  • Negative values (properly clamped to 0)
  • Values exceeding 100% (properly clamped to 1)
  • Negative markers (clamped to 0)
  • Exceeding markers (clamped to 1)
• Composite Examples:
  • Progression sequence showing 0% → 25% → 50% → 75% → 100%
  • All size variants comparison
  • Custom CSS class usage

Benefits:

• Complete visual documentation of all progress bar states
• Validates clamping behavior with out-of-bounds inputs
• Serves as developer reference and design system showcase
• Ready to use immediately upon Storybook setup/installation

---

Testing Checklist

• Mobile nav scrolls horizontally on screens <360px without overflow
• Notification dropdown respects viewport boundaries on narrow screens
• Webhook delivery history rows display all info on mobile (no cutoff)
• All text truncates/wraps appropriately on constrained layouts
• Desktop experience unchanged (all fixes are responsive fallbacks)
• Accessibility maintained (ARIA labels, semantic HTML preserved)
• Progress bar component renders correctly in all story variants

Browser/Device Testing

• Test on mobile devices (iPhone SE 375px, iPhone 6/7/8 375px)
• Test on tablet (iPad Mini 768px)
• Test in browser dev tools responsive mode at various widths
• Test at 360px viewport width for edge case handling

Files Changed

• components/layout/navbar.tsx - Mobile nav overflow handling
• components/layout/notification-bell.tsx - Dropdown width constraint
• components/webhooks/webhook-settings.tsx - Delivery history row text handling
• components/ui/progress-bar.stories.tsx - New Storybook stories file

---

Related Issues

Closes #666
Closes #667
Closes #668
Closes #669

---

[drips-wave]

@Barbie-Dev Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits