[JEWEL-1213] Fix Scrollbar Overflow in Rounded PopupContainer

[DanielSouzaBertoldi]

Context

We got a call from a secret organization (we are required by law not to disclose their name, so sorry you’ll have to stay curious), and what they had to say was dire. Most of us were shaking; others completely passed out and took about maybe two and a half minutes to recover. They had found yet another bug in our ComboBox component, and this one was serious: their developers were so annoyed by it that they started rioting, demanding that it be fixed ASAP.

Click here to check the bug. User discretion is advised.

Thus, here we are.

Changes

• Added .clip(popUpShape) to PopUpContainer.kt

Evidences

Before	After
Screen.Recording.2026-01-09.at.11.57.17.mov	Screen.Recording.2026-01-09.at.11.57.46.mov

Also, since I don't have a Windows machine to test this out natively, what I did was literally just overriding the scrollbar style in the VerticallyScrollableContainer Composable fromScrollableContainer.kt:

Check the code snippet here

val overrideScrollBarStyle = ScrollbarStyle(
        colors = ScrollbarColors(
            thumbBackground = Color.LightGray,
            thumbBackgroundActive = Color.LightGray,
            thumbOpaqueBackground = Color.LightGray,
            thumbOpaqueBackgroundHovered = Color.LightGray,
            thumbBorder = Color.LightGray,
            thumbBorderActive = Color.LightGray,
            thumbOpaqueBorder = Color.LightGray,
            thumbOpaqueBorderHovered = Color.LightGray,
            trackBackground = Color.LightGray,
            trackBackgroundExpanded = Color.LightGray,
            trackOpaqueBackground = Color.LightGray,
            trackOpaqueBackgroundHovered = Color.LightGray,
        ),
        metrics = ScrollbarMetrics(
            thumbCornerSize = CornerSize(0.dp),
            minThumbLength = 5.dp,
        ),
        trackClickBehavior = TrackClickBehavior.NextPage,
        scrollbarVisibility = AlwaysVisible(
            trackThickness = 12.dp,
            trackPadding = PaddingValues(),
            trackPaddingWithBorder = PaddingValues(),
            thumbColorAnimationDuration = 300.milliseconds,
            trackColorAnimationDuration = 300.milliseconds,
            scrollbarBackgroundColorLight = Color.LightGray, 
            scrollbarBackgroundColorDark = Color.LightGray,
            trackThicknessExpanded = 15.dp,
        )
    )

    ScrollableContainerImpl(
        verticalScrollbar = {
            VerticalScrollbar(
                scrollState = scrollState,
                modifier = scrollbarModifier,
                style = overrideScrollBarStyle,
                keepVisible = keepVisible,
                enabled = scrollbarEnabled,
                reverseLayout = reverseLayout,
                interactionSource = scrollbarInteractionSource,
            )
        },
        verticalScrollbarVisible = scrollState.canScroll,
        verticalScrollbarPosition = ScrollbarPosition.End,
        horizontalScrollbar = null,
        horizontalScrollbarVisible = false,
        horizontalScrollbarPosition = ScrollbarPosition.End,
        scrollbarStyle = overrideScrollBarStyle,
        modifier = modifier.withKeepVisible(overrideScrollBarStyle.scrollbarVisibility.lingerDuration, scope) { keepVisible = it },
    ) {
        Box(Modifier.layoutId(ID_CONTENT)) { content() }
    }

I think that just using a scrollbar style similar to Windows is enough to replicate it.

Side note: hopefully the developers from the secret organization can finally rest easy knowing this has been addressed.

[wellingtoncosta]

@DanielSouzaBertoldi I have a Windows machine and I can test it for you if you want. We can quickly pair later on this.

[rock3r]

LGTM but leaving to secret agent Wellington to check on Windows then approve

[wellingtoncosta]

Agent Wellington informing that it's looking good on Windows 🫡

2026-01-09.17-59-15.mp4