Position of the overflow menu in Tabs to be right aligned with the trigger button

[akawanishi]

Latest version

• I have tested the latest version

Description

Can we switch the position of the overflow menu in Tabs to be right aligned with the trigger button, so that the menu does not overflow right in small screens.

Steps to reproduce

Use TabsNext overflow version and

open overflow menu.

Expected behavior

Right side of overflow menu should align with right side of the trigger button.

Package name(s)

Lab (@salt-ds/lab)

Package version(s)

No response

Browser

• Chrome
• Safari
• Firefox
• Microsoft Edge

Operating system

• macOS
• Windows
• Linux
• iOS
• Android

Are you a JPMorgan Chase & Co. employee?

• I am an employee of JPMorgan Chase & Co.

[mark-tate]

Can you add a screenshot (or email us)

[mark-tate]

This requires us to modify the Dropdown, currently placement is hardcoded.
If we could replace this with middleware then it could handle things automatically, based on available space.

in Dropdown.tsx

    useFloatingUI({
      open: openState && !readOnly && Children.count(children) > 0,
      onOpenChange: handleOpenChange,
      placement: "bottom-end",
      middleware: [
        offset(1),
        size({
          apply({ rects, elements, availableHeight }) {
            Object.assign(elements.floating.style, {
              minWidth: `${rects.reference.width}px`,
              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,
            });
          },
        }),
        flip({ fallbackStrategy: "initialPlacement" }),
      ],
    });

Sometimes, placement cannot be honoured (due to space) which is where the middleware approach will works in all situations.

[mark-tate]

Oregano Goal:
will be looked at as part of #4644, will feedback to team short-term options

[mark-tate]

blocked pending 4644