Tabs scroll button blur effect(?)

Flow
1

Hello! So I’m having custom content in Tabs component, including image, button and text. The problem is, that on small screen, the tabs scroll buttons are way too big and it is blocking the view too much. Is there css variable to adjust that or what should I do? Also, is it possible to change the scroll amount when the button is clicked?

Thanks!

17468042.png

2 
:host([overflow~="start"]
[overflow~="end"]
:not([orientation="vertical"]
)) [part="tabs"]
 {
    --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent 2em, #000 4em, #000 calc(100% - 4em), transparent calc(100% - 2em));
}

This is the value you are looking for to manage the shading. It is located in vaadin-tabs → #shadow-root(open) → div id=scroll part tabs

For the buttons size, find vaadin-tabs -> #shadow-root(open) -> div id=back/forward-button
the variable for the size is in [part="forward-button"] , [part="back-button"] { font-size:... }

I hope it helped

3

Got it fixed now. Many thanks!