fix(scroll): revised Scrollable design for better interoperability

[cyfung1031]

Closes #2508

Description

Fix .overflow_y_scrollbar() / .overflow_scrollbar() layout behavior when used with layout styles such as .gap().

Previously, Scrollable rendered an additional internal scroll-area div and inserted the caller's element as a child of that wrapper. This changed the layout structure and could cause styles applied to the original element, such as flex gap, to no longer behave as expected.

This PR changes Scrollable so the original element itself becomes the scroll-tracked container. The outer wrapper is only used to preserve sizing and overlay the scrollbar. This keeps the caller's layout styles intact while still rendering the scrollbar.

Main changes:

• Preserve the source element as the actual scroll area.
• Move scroll tracking and overflow behavior directly onto the source element.
• Keep the outer wrapper responsible for sizing, positioning, and scrollbar overlay.
• Use generated element IDs instead of fixed string IDs for scrollable parts.
• Generalize the InteractiveElement implementation for Scrollable<E>.

Screenshot

Before	After
See issue #2508 actual result	See issue #2508 expected result

How to Test

1. Run a story or example that uses .overflow_y_scrollbar() with a flex layout and .gap(), for example:

v_flex()
    .flex_1()
    .gap(px(30.))
    .overflow_y_scrollbar()
    .px(px(12.))
    .pb(px(16.))
    .children(cards)

2. Confirm that the gap between children is preserved.
3. Confirm that the vertical scrollbar still appears and scrolls correctly.
4. Confirm that existing .overflow_scrollbar(), .overflow_x_scrollbar(), and .overflow_y_scrollbar() usages still work.

Checklist

• I have read the CONTRIBUTING document and followed the guidelines.
• Reviewed the changes in this PR and confirmed AI generated code (If any) is accurate.
• Passed cargo run for story tests related to the changes.
• Tested macOS, Windows and Linux platforms performance (if the change is platform-specific)