Refactor select overlay positioning with CDK ConnectedPosition

[klagrida]

Summary

Refactored the select component's overlay positioning to use explicit ConnectedPosition configurations instead of the inline overlay configuration object. This provides better control over positioning behavior and fallback strategies.

Key Changes

• Added ConnectedPosition[] array with two positioning strategies:
  • Primary: overlay below the trigger, aligned to start with 4px offset
  • Fallback: overlay above the trigger when insufficient space below, with -4px offset
• Updated cdkConnectedOverlay binding to use individual property bindings:
  • [cdkConnectedOverlayOrigin] for the origin element
  • [cdkConnectedOverlayPositions] for the position strategies
  • [cdkConnectedOverlayMinWidth] for width matching
• Removed usePopover: 'inline' and matchWidth: true from inline configuration
• Added triggerWidth() computed signal to dynamically provide the trigger element's width
• Removed mt-1 (margin-top) from select-popup styling since spacing is now handled by the offsetY positioning configuration

Implementation Details

The new approach separates concerns by:

1. Defining positioning strategies as a constant, making them reusable and testable
2. Using individual CDK overlay bindings for clearer intent and better type safety
3. Leveraging computed signals to reactively provide the trigger width for overlay sizing
4. Allowing the CDK overlay to automatically flip between positions based on available viewport space

https://claude.ai/code/session_01MEbQJiNKarA74je1KFZUQF