Collapsed idle pill is misaligned in mobile view (countdown and Run button float in the middle) #229

LABELS: bug
everything made with Sonnet 5.5

Describe the bug
In the mobile layout (viewport <= 768px) the collapsed idle pill in the page header is laid out unevenly. The pill stretches over the full width (that part is fine), but its content is distributed with equal gaps: "Next run" sits at the far left, the countdown ("15h 47m") together with the Run button floats in the middle, and the expand chevron sits at the far right. This leaves two differently sized gaps and the pill looks unbalanced compared to the desktop pill, which is compact and round.

This is a follow-up to #218 / #225, which added the Run button directly to the pill. Everything about that change works well, including the expanded pill (Run Now / Dry Run / Verbose), which looks great and should stay exactly as it is. Only the position of the content in the collapsed pill in the mobile view is off.

To Reproduce

1. Open the PlexCache-D web UI with a schedule enabled (so the pill shows "Next run ...").
2. Open the Dashboard on a phone, or narrow the browser window / zoom in until the layout switches to the mobile view (<= 768px).
3. Look at the collapsed pill at the top of the page.
4. See: label left, countdown + Run button in the middle, chevron right.

Expected behavior
Keep the info together on the left (clock icon, "Next run", countdown) and put the actions on the right (Run button, then the chevron), so there is only one gap and the Run button sits where the thumb expects it. The desktop pill and the expanded pill must not change.

Screenshots

Smartphone (please complete the following information):

• Browser: Firefox & Chrome
• Version: PlexCache-D v3.2.0, Docker image :dev usign newest files with all merged PRs (includes Fix: operation pill no longer overlaps UI at high zoom / on phones (#216) #218 / Start runs from the operation pill instead of the Dashboard header #225)

Additional context
Root cause (from reading web/static/css/custom.css): inside @media (max-width: 768px) the pill gets width: 100%, while .di-pill__compact uses justify-content: space-between. The compact row has three flex items: .di-pill__left, .di-pill__right (countdown + Run button) and the chevron, which is the ::after pseudo-element of .di-pill__compact. With space-between the middle item ends up centered. On desktop the pill is only as wide as its content, so the problem does not show.

By code inspection the "PlexCache" ready pill (no schedule configured) should be affected in the same way: the Run button would sit in the middle instead of at the right. I have not checked that one on a device yet.

I have a small CSS-only fix ready (scoped to the two idle pills inside the existing mobile media query) and will open a PR that references this issue.