How to make Program title visible while scrolling for large program cell?

[chat2goku]

Hii

How to make Program title visible while scrolling for large program cell ?

I want to make title visible till end of the program cell while horizontal scrolling.

[oleksandrbalan]

Hi 👋 I think you could use state.minaBoxState.translate to pad the program title from the left side.

itemContent = {
    val density = LocalDensity.current
    val textStartPadding by remember(density) {
        val channelWidth = with(density) { dimensions.channelWidth.roundToPx() }
        derivedStateOf {
            val index = programs.indexOf(it)
            val translateX = state.minaBoxState.translate?.x ?: 0f
            val itemOffsetX = state.minaBoxState.positionProvider.getOffset(
                index = index,
                alignment = Alignment.TopStart,
                paddingStart = channelWidth.toFloat(),
            )
            val paddingPx = (translateX - itemOffsetX.x).coerceAtLeast(0f)
            with(density) { paddingPx.toDp() }
        }
    }
    ProgramCell(
        textStartPadding = textStartPadding,
        program = it,
        onClick = {
            val index = programs.indexOf(it)
            scope.launch { state.animateToProgram(index) }
        }
    )
},

However there is a some sort of delay (due to how animation works when layout is scrolling), which will result in not-so-perfect UI experience. I should take a look if MinaBox could pre-calculate this offset and provide it via itemContent, but I am not sure how much it will impact layout performance.

https://github.com/user-attachments/assets/bb765399-0393-438a-8960-89e01105d79d