St.pill content not showing correctly

[Charles9]

I have a chat and am not sure why the pill buttons and icons are not centered. It looks good if I use only icons.

icon_to_feedback = {
    "Yes :material/thumb_up:": "yes",
    "No :material/stars:": "regex",
    "Neu :material/thumb_down:": "no",
    "Quit :material/cancel:": "discard"
}

selected_option = st.pills(
            label="Select your response",
            options=list(icon_to_feedback.keys()),
            label_visibility="collapsed",
        )

Any hint would be appreciated.

[Goyo]

It works as expected for me (Streamlit v1.41.1).

Maybe the problem is due to something else in your code.

[Charles9]

It also works for me when I did a demo like you have done. The problem is when I use it in the chat window.

I also tried buttons with help. The button icons display well but the helper text is not aligned in the middle of the bubble.

Thanks for your response all the same.

[Charles9]

The issue happens when using st.html in the chat window. st.markdown works just fine and doesn’t affect the st.pills alignment.