/** * Subscriptions Health Check admin styles. * * Loaded only on the WC Status page via Bootstrap's admin_enqueue_scripts * handler. Previously inline in StatusTab::render(); extracted so the * browser caches the bytes, CSP headers can cover them, and other * plugins can override without !important. */ /* * The candidates table is sized to its content (table-layout: auto, so * columns grow to fit their longest cell), and on stores with long * product titles or customer names it can be wider than the admin * content area. WC Admin's embed page CSS sets * .woocommerce-embed-page #wpcontent, * .woocommerce-embed-page #wpbody-content { overflow-x: initial !important } * which removes the default horizontal containment on the admin chrome, * letting that overflow bubble all the way up to the body and turn the * whole page into a horizontal scroll. Restoring containment at the * same elements (with `clip`, which clips the paint without forcing a * vertical scrollbar) keeps the overflow inside our scroll wrapper. * * Scoped via `:has()` so the override only applies when this tab is * being rendered — other WC Status tabs and other embed pages keep * WC's intended `overflow-x: initial`. Specificity (0,2,1) plus * `!important` is what's needed to outrank WC's own (0,1,1) + * `!important`. */ .woocommerce-embed-page #wpcontent:has(.woocommerce-subscriptions-health-check-tab), .woocommerce-embed-page #wpbody-content:has(.woocommerce-subscriptions-health-check-tab) { overflow-x: clip !important; } .woocommerce-subscriptions-health-check-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 0.75em; flex-wrap: wrap; } .woocommerce-subscriptions-health-check-header-title h2 { margin: 0 0 4px; padding: 0; } .woocommerce-subscriptions-health-check-header-title .description { margin: 0; max-width: 60em; } .woocommerce-subscriptions-health-check-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .woocommerce-subscriptions-health-check-header-actions form { margin: 0; } /* * WP core's .spinner is float-left with a 20x20 box and top margin * that assumes it sits beside a button, not inside one. Inside our * Run-now button we want it inline, vertically centred, with no * float or top margin so the button height stays consistent with * the idle state and the GIF lines up with the "Run now" label. */ .woocommerce-subscriptions-health-check-run-now-form .spinner.is-active { float: none; display: inline-block; vertical-align: middle; margin: 0 0 0 6px; } /* * Outranks WooCommerce core's `.woocommerce-embed-page .notice { padding: 1px 12px }` * rule from `embed/style.css`, which ties on specificity (0,2,0) with a * bare `.tab .summary` selector and loads AFTER our stylesheet in the * cascade — which would otherwise flatten the card to WP's default * notice padding. The compound `.notice.

` chip bumps us to * (0,3,0). The pre-extraction inline `