fix(ui): keep floating menus within viewport

src/lib/components/ui/floating-content.test.ts

@@ -0,0 +1,33 @@
+import { cleanup, render, screen } from '@testing-library/svelte';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import FloatingContentHarness from './floating-content.test.svelte';
+
+afterEach(cleanup);
+
+describe('floating content primitives', () => {
+  it('bounds select menus to the available viewport with an internal scroll region', async () => {
+    render(FloatingContentHarness, { kind: 'select' });
+
+    const content = await screen.findByRole('listbox');
+    const viewport = content.querySelector('[data-select-viewport]');
+    expect(content.className).toContain('var(--bits-select-content-available-height)');
+    expect(viewport?.className).toContain('overscroll-contain');
+    expect(content.closest('[data-bits-floating-content-wrapper]')?.getAttribute('dir')).toBe('rtl');
+  });
+
+  it('bounds popovers and menus to their collision-aware available height', async () => {
+    const popoverView = render(FloatingContentHarness, { kind: 'popover' });
+    const popover = screen.getByText('محتوای جزئیات');
+    expect(popover.className).toContain('var(--bits-popover-content-available-height)');
+    expect(popover.closest('[data-bits-floating-content-wrapper]')?.getAttribute('dir')).toBe('rtl');
+
+    popoverView.unmount();
+
+    render(FloatingContentHarness, { kind: 'menu' });
+    const menu = screen.getByRole('menu');
+    expect(menu.className).toContain('var(--bits-dropdown-menu-content-available-height)');
+    expect(menu.className).toContain('overscroll-contain');
+    expect(menu.closest('[data-bits-floating-content-wrapper]')?.getAttribute('dir')).toBe('rtl');
+  });
+});