From e812921e3a9693064fd4ef6d65abb9d11c53134d Mon Sep 17 00:00:00 2001
From: Barbie-Dev <enyiqueen199@gmail.com>
Date: Sun, 30 Aug 2026 04:51:33 +0000
Subject: [PATCH 1/4] fix(#667): add overflow-x-auto to mobile nav to prevent
 link overflow on narrow viewports

- Wrap nav links in a scrollable container
- Add whitespace-nowrap to prevent link text wrapping
- Allows horizontal scrolling on extremely narrow screens (<360px)
- Maintains visual integrity without breaking layout
---
 components/layout/navbar.tsx | 38 +++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index a5cad91..878792c 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -147,24 +147,26 @@ export function Navbar() {
       )}
 
       {/* Mobile nav */}
-      <nav className="flex items-center gap-1 border-t border-border px-4 py-2 md:hidden">
-        {NAV_LINKS.map((link) => {
-          const active = link.href === '/app' ? pathname === '/app' : pathname.startsWith(link.href)
-          return (
-            <Link
-              key={link.href}
-              href={link.href}
-              className={cn(
-                'rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
-                active
-                  ? 'bg-secondary text-foreground'
-                  : 'text-muted-foreground hover:text-foreground',
-              )}
-            >
-              {link.label}
-            </Link>
-          )
-        })}
+      <nav className="overflow-x-auto border-t border-border px-4 py-2 md:hidden">
+        <div className="flex items-center gap-1">
+          {NAV_LINKS.map((link) => {
+            const active = link.href === '/app' ? pathname === '/app' : pathname.startsWith(link.href)
+            return (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={cn(
+                  'rounded-md px-3 py-1.5 text-sm font-medium transition-colors whitespace-nowrap',
+                  active
+                    ? 'bg-secondary text-foreground'
+                    : 'text-muted-foreground hover:text-foreground',
+                )}
+              >
+                {link.label}
+              </Link>
+            )
+          })}
+        </div>
       </nav>
     </header>
   )

From 97d07a4eb22e503455e9d9c8a0709fc006bf6f1c Mon Sep 17 00:00:00 2001
From: Barbie-Dev <enyiqueen199@gmail.com>
Date: Sun, 30 Aug 2026 04:51:40 +0000
Subject: [PATCH 2/4] fix(#668): constrain notification dropdown width on
 narrow viewports

- Add max-w-[calc(100vw-2rem)] to prevent overflow
- Maintains 1rem margin from viewport edges
- Dropdown never exceeds visible viewport width on narrow screens
- Keeps 320px width as primary constraint with viewport fallback
---
 components/layout/notification-bell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/layout/notification-bell.tsx b/components/layout/notification-bell.tsx
index 7f5ced1..4dd095f 100644
--- a/components/layout/notification-bell.tsx
+++ b/components/layout/notification-bell.tsx
@@ -145,7 +145,7 @@ export function NotificationBell() {
           role="menu"
           aria-label="Notifications"
           tabIndex={-1}
-          className="absolute right-0 top-full z-50 mt-2 w-80 rounded-xl border border-border bg-card shadow-lg focus:outline-none"
+          className="absolute right-0 top-full z-50 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-xl border border-border bg-card shadow-lg focus:outline-none"
         >
           <div className="flex items-center justify-between border-b border-border px-4 py-3">
             <h3 className="text-sm font-medium">Notifications</h3>

From ef1212f9a54f01b4bd4f09141760736d5158fc31 Mon Sep 17 00:00:00 2001
From: Barbie-Dev <enyiqueen199@gmail.com>
Date: Sun, 30 Aug 2026 04:51:56 +0000
Subject: [PATCH 3/4] fix(#669): add truncation and wrapping to webhook
 delivery-history rows

- Add min-w-0 to left section to allow shrinking
- Add truncate to event type label to prevent overflow
- Add flex-wrap to enable wrapping on narrow viewports
- Add shrink-0 to right section to protect status/time info
- Ensures all information remains visible on mobile screens
---
 components/webhooks/webhook-settings.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/webhooks/webhook-settings.tsx b/components/webhooks/webhook-settings.tsx
index 11ec5b1..9e24c7c 100644
--- a/components/webhooks/webhook-settings.tsx
+++ b/components/webhooks/webhook-settings.tsx
@@ -184,16 +184,16 @@ export function WebhookSettings() {
           <h2 className="font-medium">Recent deliveries</h2>
           <div className="rounded-lg border border-border divide-y divide-border">
             {history.slice(0, 20).map((d, i) => (
-              <div key={i} className="flex items-center justify-between px-4 py-2.5 text-sm">
-                <div className="flex items-center gap-2">
+              <div key={i} className="flex flex-wrap items-center justify-between gap-2 px-4 py-2.5 text-sm">
+                <div className="flex min-w-0 items-center gap-2">
                   {d.success ? (
                     <CheckCircle2 className="size-4 text-green-500 shrink-0" />
                   ) : (
                     <XCircle className="size-4 text-destructive shrink-0" />
                   )}
-                  <span className="text-muted-foreground">{d.eventType}</span>
+                  <span className="truncate text-muted-foreground">{d.eventType}</span>
                 </div>
-                <div className="flex items-center gap-3 text-muted-foreground text-xs">
+                <div className="flex shrink-0 items-center gap-3 text-muted-foreground text-xs">
                   {d.statusCode && <span>{d.statusCode}</span>}
                   <span>{formatTimeAgo(d.deliveredAt)}</span>
                 </div>

From 4563a2cb3687ac31a98873f133825f5e60ac49b5 Mon Sep 17 00:00:00 2001
From: Barbie-Dev <enyiqueen199@gmail.com>
Date: Sun, 30 Aug 2026 04:52:23 +0000
Subject: [PATCH 4/4] feat(#666): add comprehensive Storybook stories for
 progress-bar component

- Create narrative demonstrations for multiple progress states
- Include visual examples for 0%, 25%, 50%, 75%, and 100% completion
- Test edge cases with negative values (clamped to 0)
- Test edge cases with values exceeding 100% (clamped to 1)
- Test marker functionality with out-of-bounds values
- Document all size variants (sm, default, lg)
- Include indeterminate shimmer examples
- Ready for use when Storybook is set up
---
 components/ui/progress-bar.stories.tsx | 244 +++++++++++++++++++++++++
 1 file changed, 244 insertions(+)
 create mode 100644 components/ui/progress-bar.stories.tsx

diff --git a/components/ui/progress-bar.stories.tsx b/components/ui/progress-bar.stories.tsx
new file mode 100644
index 0000000..678dcf6
--- /dev/null
+++ b/components/ui/progress-bar.stories.tsx
@@ -0,0 +1,244 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ProgressBar } from './progress-bar'
+
+const meta = {
+  title: 'UI/ProgressBar',
+  component: ProgressBar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ProgressBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Default progress bar at 50% completion
+ */
+export const Default: Story = {
+  args: {
+    value: 0.5,
+  },
+}
+
+/**
+ * Progress bar showing 0% completion (empty state)
+ */
+export const Empty: Story = {
+  args: {
+    value: 0,
+  },
+}
+
+/**
+ * Progress bar showing 25% completion
+ */
+export const QuarterComplete: Story = {
+  args: {
+    value: 0.25,
+  },
+}
+
+/**
+ * Progress bar showing 50% completion (half-way)
+ */
+export const HalfComplete: Story = {
+  args: {
+    value: 0.5,
+  },
+}
+
+/**
+ * Progress bar showing 75% completion
+ */
+export const ThreeQuartersComplete: Story = {
+  args: {
+    value: 0.75,
+  },
+}
+
+/**
+ * Progress bar showing 100% completion (full state)
+ */
+export const Complete: Story = {
+  args: {
+    value: 1,
+  },
+}
+
+/**
+ * Progress bar with indeterminate shimmer effect
+ * Useful for operations with unknown duration
+ */
+export const IndeterminateShimmer: Story = {
+  args: {
+    value: 0.5,
+    indeterminateShimmer: true,
+  },
+}
+
+/**
+ * Small size variant
+ */
+export const SmallSize: Story = {
+  args: {
+    value: 0.5,
+    size: 'sm',
+  },
+}
+
+/**
+ * Default size variant (default)
+ */
+export const DefaultSize: Story = {
+  args: {
+    value: 0.5,
+    size: 'default',
+  },
+}
+
+/**
+ * Large size variant
+ */
+export const LargeSize: Story = {
+  args: {
+    value: 0.5,
+    size: 'lg',
+  },
+}
+
+/**
+ * Progress bar with a secondary marker (e.g., withdrawn portion)
+ * Marker shows at 30% while progress is at 50%
+ */
+export const WithMarker: Story = {
+  args: {
+    value: 0.5,
+    marker: 0.3,
+  },
+}
+
+/**
+ * Edge case: negative value (should be clamped to 0)
+ * The component should restrict negative values and display as empty
+ */
+export const NegativeValue: Story = {
+  args: {
+    value: -0.5,
+  },
+}
+
+/**
+ * Edge case: value exceeding 100% (should be clamped to 1)
+ * The component should restrict values over 1 and display as full
+ */
+export const ExceedingValue: Story = {
+  args: {
+    value: 1.5,
+  },
+}
+
+/**
+ * Edge case: marker with negative value (should be clamped to 0)
+ */
+export const NegativeMarker: Story = {
+  args: {
+    value: 0.5,
+    marker: -0.3,
+  },
+}
+
+/**
+ * Edge case: marker exceeding 100% (should be clamped to 1)
+ */
+export const ExceedingMarker: Story = {
+  args: {
+    value: 0.5,
+    marker: 1.5,
+  },
+}
+
+/**
+ * Small size with indeterminate shimmer
+ */
+export const SmallWithShimmer: Story = {
+  args: {
+    value: 0.5,
+    size: 'sm',
+    indeterminateShimmer: true,
+  },
+}
+
+/**
+ * Large size with indeterminate shimmer
+ */
+export const LargeWithShimmer: Story = {
+  args: {
+    value: 0.5,
+    size: 'lg',
+    indeterminateShimmer: true,
+  },
+}
+
+/**
+ * Custom CSS class example
+ */
+export const WithCustomClass: Story = {
+  args: {
+    value: 0.5,
+    className: 'w-full max-w-md',
+  },
+}
+
+/**
+ * Multiple progress bars showing progression
+ */
+export const ProgressionSequence: Story = {
+  render: () => (
+    <div className="space-y-6 w-full max-w-md">
+      <div>
+        <p className="text-sm font-medium mb-2">0% - No progress</p>
+        <ProgressBar value={0} />
+      </div>
+      <div>
+        <p className="text-sm font-medium mb-2">25% - Starting</p>
+        <ProgressBar value={0.25} />
+      </div>
+      <div>
+        <p className="text-sm font-medium mb-2">50% - Halfway</p>
+        <ProgressBar value={0.5} />
+      </div>
+      <div>
+        <p className="text-sm font-medium mb-2">75% - Nearly done</p>
+        <ProgressBar value={0.75} />
+      </div>
+      <div>
+        <p className="text-sm font-medium mb-2">100% - Complete</p>
+        <ProgressBar value={1} />
+      </div>
+    </div>
+  ),
+}
+
+/**
+ * All size variants together
+ */
+export const AllSizeVariants: Story = {
+  render: () => (
+    <div className="space-y-6 w-full max-w-md">
+      <div>
+        <p className="text-sm font-medium mb-2">Small</p>
+        <ProgressBar value={0.6} size="sm" />
+      </div>
+      <div>
+        <p className="text-sm font-medium mb-2">Default</p>
+        <ProgressBar value={0.6} size="default" />
+      </div>
+      <div>
+        <p className="text-sm font-medium mb-2">Large</p>
+        <ProgressBar value={0.6} size="lg" />
+      </div>
+    </div>
+  ),
+}