Fix End Date/Time overlapping Start Date/Time on submission forms [#310]

[dgershman]

Closes #310

Problem

After #300 (PR #305) replaced the native <input type="time"> on the event and announcement submission forms with Hour/Minute/AM-PM <select> dropdowns, the End Date/Time field visually overlapped the Start Date/Time field (reported on 1.9.2-beta1).

Root cause

The two date/time fields sit side-by-side in .mayo-datetime-group. The shipped global rule .mayo-form-field select { width: 100% } applies to the new time <select>s:

• Hour / Minute survive it — .mayo-time-inputs select { flex: 1; min-width: 0 } gives flex-basis: 0%, which overrides width for flex sizing.
• AM/PM does not — .mayo-time-inputs .mayo-time-ampm { flex: 0 0 auto } wins on specificity, so flex-basis: auto falls back to width: 100%. Being non-shrinkable (flex-shrink: 0), it becomes rigidly 100% of its container and overflows the column, spilling onto the adjacent field.

Fix

Add width: auto to .mayo-time-inputs select so the shipped width: 100% no longer forces the AM/PM select to fill/overflow the flex container. CSS-only (public.css is enqueued directly — no JS rebuild), and both the event and announcement forms share this structure so both are fixed.

Testing

• Rendered [mayo_event_form] / [mayo_announcement_form] at ~615px (matching the report): Start and End columns now sit side-by-side with no overlap; AM/PM sits inline after Minute within its own column.
• 24-hour mode (time_format="24hour", no AM/PM select) and the ≤600px stacked layout both unchanged.
• Values still store as canonical HH:mm (layout-only change).