@open-mercato/ui 0.6.5-develop.5382.1.f542de69af → 0.6.5

package/src/primitives/__tests__/pagination.test.tsx

@@ -60,6 +60,37 @@ describe('Pagination', () => {
     expect(nav.getAttribute('aria-label')).toBe('Pagination')
   })
 
+  // The info text, page buttons, and page-size select together need ~600px of
+  // min-content (info and the select are shrink-0). Without flex-wrap the row
+  // cannot compress on a phone-width container, overflows its card, and drags
+  // the whole page into horizontal scroll. Every level that holds a fixed-width,
+  // shrink-0 button run must be allowed to wrap: the root row, the controls
+  // group (first/prev/pages/next/last ≈ 392px at 6 pages — wider than a phone
+  // on its own), and the page-number list itself (so a long run wraps instead
+  // of overflowing). Wrapping just the outer row leaves the ~392px controls
+  // group on a single unbreakable line that still overflows.
+  it('lets every fixed-width control row wrap on narrow containers', () => {
+    const { container } = render(
+      <Pagination
+        page={3}
+        pageSize={20}
+        total={120}
+        onPageChange={() => {}}
+        onPageSizeChange={() => {}}
+      />,
+    )
+    const tokensOf = (selector: string) => {
+      const el = container.querySelector(selector) as HTMLElement | null
+      expect(el).not.toBeNull()
+      return (el!.getAttribute('class') ?? '').split(/\s+/).filter(Boolean)
+    }
+    expect(tokensOf('[data-slot="pagination"]')).toEqual(
+      expect.arrayContaining(['flex-wrap', 'justify-between']),
+    )
+    expect(tokensOf('[data-slot="pagination-controls"]')).toContain('flex-wrap')
+    expect(tokensOf('[data-slot="pagination-pages"]')).toContain('flex-wrap')
+  })
+
   it('renders "Page X of Y" info by default', () => {
     const { container } = render(
       <Pagination page={2} pageSize={10} total={100} onPageChange={() => {}} />,

package/src/primitives/avatar.tsx

@@ -279,12 +279,18 @@ export type AvatarStackProps = {
   max?: number
   size?: VariantProps<typeof avatarVariants>['size']
   className?: string
+  /**
+   * Additional hidden items not represented by `children` — e.g. a server-truncated list that
+   * already returned only the top N owners. Added to the children-derived overflow so the
+   * "+N" badge reflects the true number of omitted items, not just the ones dropped locally.
+   */
+  overflowCount?: number
 }
 
-export function AvatarStack({ children, max = 4, size = 'md', className }: AvatarStackProps) {
+export function AvatarStack({ children, max = 4, size = 'md', className, overflowCount = 0 }: AvatarStackProps) {
   const items = React.Children.toArray(children)
   const visible = items.slice(0, max)
-  const overflow = items.length - max
+  const overflow = Math.max(0, items.length - max) + Math.max(0, overflowCount)
 
   return (
     <div

package/src/primitives/pagination.tsx

@@ -235,7 +235,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
         ref={ref}
         data-slot="pagination"
         aria-label={props['aria-label'] ?? t('ui.pagination.landmark.ariaLabel', 'Pagination')}
-        className={cn('flex w-full items-center justify-between gap-6', className)}
+        className={cn('flex w-full flex-wrap items-center justify-between gap-x-6 gap-y-2', className)}
         {...props}
       >
         {showInfo ? (
@@ -251,7 +251,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
 
         <div
           data-slot="pagination-controls"
-          className="inline-flex items-center gap-2"
+          className="flex flex-wrap items-center justify-center gap-2"
         >
           {showFirstLast ? (
             <button
@@ -280,7 +280,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
 
           <ol
             data-slot="pagination-pages"
-            className="inline-flex items-center gap-2 list-none"
+            className="flex flex-wrap items-center justify-center gap-2 list-none"
           >
             {items.map((entry, index) => {
               if (entry === 'ellipsis-left' || entry === 'ellipsis-right') {