[DeLo1585]

Summary

Fixes the layout of the collapsed idle pill in the mobile view (viewport <= 768px). The info (clock, "Next run", countdown) now stays on the left, and the Run button and the chevron sit on the right.

Fixes #229. Follow-up to #218 / #225, which added the Run button to the pill.

CSS only: one file (web/static/css/custom.css), +22 lines, no template, JS or Python changes.

Problem

On mobile the pill stretches to the full width (intended). .di-pill__compact then spreads its three flex items with justify-content: space-between: the label group (clock + "Next run"), the time + Run group, and the chevron (::after). The result is two equal gaps, and "15h 47m [Run]" floats in the middle of the pill. The "PlexCache" ready pill (no schedule) has the same structure, so its Run button sits in the middle instead of at the right.

Root cause: .di-pill__compact { justify-content: space-between } combined with .di-pill { width: 100% } inside @media (max-width: 768px). On desktop the pill is only as wide as its content, so it is not visible there.

Fix (Proposal A: info left, actions right)

Added inside the existing @media (max-width: 768px) block, scoped to #idle-countdown-pill and #idle-ready-pill:

#idle-countdown-pill .di-pill__compact,
#idle-ready-pill .di-pill__compact {
    justify-content: flex-start;
    gap: 0.5rem;
}

#idle-countdown-pill .di-pill__right,
#idle-ready-pill .di-pill__right {
    display: contents;
}

#idle-countdown-pill .di-btn--run,
#idle-ready-pill .di-btn--run {
    margin-left: auto;
}

• justify-content: flex-start plus a small gap keeps clock, label and countdown together so they read as one "sentence".
• display: contents on .di-pill__right makes the countdown and the Run button direct flex items of the compact row, so margin-left: auto on the Run button pushes the button and the chevron to the right edge. No markup change needed.

Intentionally not changed

• Desktop (> 768px): all rules live inside the existing mobile media query.
• Expanded pill (tier 2 / tier 3): .di-pill__compact is display: none there, so these rules have no effect.
• Running, completed, error, disconnected and queue-paused pills: the selectors only match the two idle pill IDs.
• Fit mode (.di-flow), JS, templates, theme tokens, Run button size and the touch-target padding for pointer: coarse.

Before / after

The GIF is a mock-up rendered from the pill's CSS rules (light and dark), not a recording of the app. It sweeps the phone width from 400 px down to 280 px and compares the current mobile layout, this proposal (A), the alternative A2 and the unchanged desktop reference.

Real-device screenshots:

Before	After

Alternatives considered

• A2: only .di-pill--idle .di-pill__left { flex: 1 }. One rule, the time sits next to the Run button. Reads less like one sentence than A.
• B: two-line text block (small "Next run" above a larger countdown) with a smaller corner radius. Looks native on phones but makes the pill taller and is a bigger visual change.
• C: width: fit-content on mobile. Discarded: the full-width pill on mobile is intended.

Test plan

• Mobile view, schedule enabled: "Next run" and countdown on the left, Run button and chevron on the right
• Mobile view, no schedule ("PlexCache" ready pill): Run button on the right
• Light and dark theme
• Narrow widths (320 px and below): nothing wraps or overlaps
• Run button in the pill still starts a run, and tapping the pill still expands it
• Expanded pill (Run Now / Dry Run / Verbose) looks exactly as before
• Desktop (> 768px) looks exactly as before

[DeLo1585]

Commit message:

On viewports <= 768px the idle pill ("Next run" countdown and the
"PlexCache" ready pill) stretches to full width. .di-pill__compact then
spreads its three flex items (label group, time + Run group, ::after
chevron) with justify-content: space-between, so the time and the Run
button float in the middle of the pill.

Keep the info (clock, label, countdown) on the left and push the Run
button and the chevron to the right. The change lives inside the existing
max-width: 768px block and is scoped to #idle-countdown-pill and
#idle-ready-pill, so desktop, the expanded pill and the running, queue
and completed pills are unchanged.

[Brandon-Haney]

Proposal A looks like the winner to me

[StudioNirin]

No issues here. @DeLo1585 are you happy to call this ready to go? When youre happy ill merge

[DeLo1585]

Ready to Go 💪👌