Reader: fix wide unread count badges overflowing sidebar column

[le-sgs]

Proposed Changes

• In client/reader/sidebar/style.scss, widen the unread-count grid column from 36px to 48px, right-align badges within the column (justify-self: end replacing margin: 0 auto), and add white-space: nowrap on .a8c-count.

Why are these changes being made?

The unread-count badge column on Reader sidebar organization items was a fixed 36px. Compact-formatted values like 4.923 mi are wider than 1–3 digit values, so they overflowed the column, got pushed flush
against the right edge of the container, and broke the visual alignment of the list against shorter counts like 989, 977, 613.

Widening the column gives compact-K values room to render, right-aligning all badges keeps the column visually consistent regardless of badge width, and white-space: nowrap is defensive so the text never
wraps inside the badge.

Testing Instructions

1. Navigate to /reader while signed in to an account.
2. Find a sidebar item whose count renders in compact notation, set another to a 2–3 digit value.
3. Confirm:
   • The wider badge sits within the column without overflowing or hugging the container edge.
   • Wider and narrower badges share a consistent right edge (right-aligned column).

Before / After

Before: 4.923 mil badge pushed flush against the panel border, visually misaligned with shorter counts in the same column.

After: 4.923 mil and shorter counts both right-align in a wider column with comfortable spacing.

Pre-merge Checklist

• Has the general commit checklist been followed?
• Have you written new tests for your changes?
• Have you tested the feature in Simple, Atomic, and self-hosted Jetpack sites?
• Have you checked for TypeScript, React or other console errors?
• For UI changes, have you tested the affected components in dark mode?
• Have you tested accessibility for your changes?
• Have you used memoizing on expensive computations?
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-c1d33f83829770a9423db5ebc108a664cbd48996

Jetpack Cloud Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-c1d33f83829770a9423db5ebc108a664cbd48996&env=jetpack

Automattic for Agencies Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-c1d33f83829770a9423db5ebc108a664cbd48996&env=a8c-for-agencies

Dashboard Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-c1d33f83829770a9423db5ebc108a664cbd48996&env=dashboard

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• help-center
• notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/read-535-unread-badge-width on your sandbox.