Multiple pill labels show outside of guide cards for certain screen sizes

[SteveSamJacob19]

There is a bug on the tags in the guides page when the screen size is reduced as shown below.

[navaneethsnair1]

@SteveSamJacob19 It seems to be working fine. I tried them in chrome and safari.

[SteveSamJacob19]

Actually when I looked in the morning, it looked fine to me too, but I played around with the screen size and the issue popped up again randomly. I've shared a recording of the same.

Screen.Recording.2024-04-30.at.12.42.34.PM.mov

[SteveSamJacob19]

It apparently only affects some boxes

[natalie-bernhard]

It's dependent on whether the guide has multiple pill labels or just one (set in guides.html). We will probably have to limit the labels to one label per card at this time. Make sure to confirm with guides team which labels should be prioritized.

[SteveSamJacob19]

@natalie-bernhard actually if you watch the recording, you can see that some boxes with multiple labels (eg: run in cloud and updated tag together) don't have the bug while some do.

[natalie-bernhard]

@SteveSamJacob19 The initial screenshot submitted from the issue clearly shows a bug when these two tags (run in cloud and updated) are both present in a card. The only cards that don't seem to be affected are the ones with the New label since that is a shorter label.

[SteveSamJacob19]

@natalie-bernhard I thought the same too at first but actually if you go through the recording at around the 2 second timestamp, you can see a card with run in cloud and updated tags having no bug in it.

[SteveSamJacob19]

@natalie-bernhard So I played around with the screen width right from full screen to the least width possible. I noticed that issue happens only when the window.innerWidth is between 1400 and 1435 px, Because below 1400 breakpoint the window only shows 3 cards at a time while above 1435 the 4 cards have enough space between them.