Ive noticed that `BadgedBox` in M2/M3 layouts the badge outside of its bounds. This becomes troubles...

# compose

[Zoltan Demant]

Ive noticed that BadgedBox in M2/M3 layouts the badge outside of its bounds. This becomes troublesome since the last element in a list will have it cut off unless I add extra paddings to it (in my case, I cant use additional padding without headachaes for other reasons). Is this a bug or a feature? Can I work around it somehow other than using extra padding?

[Louis Pullen-Freilich [G]]

What would your desired behaviour / appearance be in this case?

[Zoltan Demant]

Maybe I was unclear about this: in my screenshot Im already scrolled all the way to the right! So I cant even see the entire badge. This is my issue. When I can see it, I love the way it looks 😄

[Louis Pullen-Freilich [G]]

If you want the entire badge to be visible, then there needs to be extra space at the end of the list. So you would need to add padding / an empty spacer at the end of the list. But you mentioned you couldn’t do this?

[Louis Pullen-Freilich [G]]

Otherwise there’s no way for this to work, without making the badge affect layout size, which would mean it wouldn’t be possible to place the items near each other like you have in the screenshot

[Zoltan Demant]

That makes sense. I wouldnt mind the badge taking up layout space, but I understand thats not the intention behind it!

[Zoltan Demant]

I was able to work around it surprisingly easily, basically switching out BadgedBox with Box. The beauty of compose 😃

[efemoney]

Just adding a counter opinion but I would mind the badge taking up layout space!

Seems like your list here should be using contentPadding instead of just clipping 🤔 (even more so since you mentioned its scrolling content)

[Zoltan Demant]

@efemoney The challenge with that for me is that Im using a fading edge effect for my list, so whenever the scroll offset increases - the fading edge comes into play. If I add contentPadding (which otherwise I think would be perfect); I break that effect. I could introduce the padding values into the fading edge behavior as well, but then I rather do ^ with a custom badge that does take up layout space, its simpler for my use case - and works wonderfully!

[Zoltan Demant]

The fading edge: