From ab67ac7f5f63d4b65fd1a7ed969d0263e87021a6 Mon Sep 17 00:00:00 2001 From: Caitlin Everett <6157119+CaitlinEverett@users.noreply.github.com> Date: Fri, 24 Jul 2026 08:23:10 -0500 Subject: [PATCH] fix(modal): mobile touch-target sizing for footer action buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit .s-modal__btn had no phone rule anywhere in Modal.css — footer action buttons rendered under the 44px --s-size-touch-target-min minimum on mobile widths. Adds a mobile block matching the guide-side notification-center.css precedent (mobile-lg breakpoint, data-viewport scoping). Companion fix in the GUIDE mirror: commonscience/steamco-workspace#1273. Co-Authored-By: Claude Sonnet 5 --- packages/primitives/src/components/Modal/Modal.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/primitives/src/components/Modal/Modal.css b/packages/primitives/src/components/Modal/Modal.css index 11875de..824cecc 100644 --- a/packages/primitives/src/components/Modal/Modal.css +++ b/packages/primitives/src/components/Modal/Modal.css @@ -509,6 +509,20 @@ cursor: not-allowed; } +/* ── Mobile footer touch targets (phone widths — see scilence + _viewport-bands.css / admin-shell.js syncViewportDataset()). Desktop + padding alone renders footer action buttons well under the 44px + minimum; every openModal() / modal.confirm() / modal.confirmDanger() + caller shares this via .s-modal__btn. ── */ +@media (max-width: 767px) { + html[data-viewport^="mobile-"] .s-modal__btn { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: var(--s-size-touch-target-min); + } +} + /* ── Optional-region hidden-state fix ──────────────────────────────────── Each optional slot region above declares an explicit `display: flex` (needed so it lays out correctly when the slot IS present). Modal.ts