Status indicator: bad layout on narrow screen

[Carreau]

Cf screenshot

Seem to be because of the css-rule:

.status-badge:last-child {
    margin-right: 0;
}

and

@media only screen and (max-width: 1200px)
.status-badge:last-child {
    margin-right: 0;
}

of _span-columns.scss

Sidenote, I see the the responsive css has transitions at: 300,400, 450, 550, 600, 640, 700, 750, 800, 900, 950, 1000, 1150, 1200 px and 37.64 em. that makes 16 with on which warehouse should potentially be visually tested for defect. Is that on purpose ? For comparison chrome dev-inspector predefined "only" 6 critical width.

[nlhkabu]

Thanks for flagging this @Carreau

I have not fixed this issue because I was planning on changing the design... because:

• There seems to be some consensus that the first badge is different to the rest (see Implement the various status badges #786)
• There are some requests to reduce the package page header height

Also, it's unlikely we're going to land this before launch, so I need to find a way to separate the first badge out from the rest that will not be shown.

Thanks also for flagging the breakpoint issue. This has been addressed in #1263

[nlhkabu]

I'm going to close this issue as the breakpoint issue has now been fixed and the indicators will be removed as per #1308.

Thanks for flagging this.

[Carreau]

Thanks you, and thanks a lot for your work !