From 06d3a8005e126442474ed3da62381b1f4c57b7d7 Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Thu, 25 Jun 2026 18:26:46 +0200 Subject: [PATCH] fix: close button unresponsive on Android tablets in file picker modal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The modal-container__content element was receiving overflow-y: auto via the NMC theme override, turning it into a scroll container. On Android Chrome, this scroll container intercepts touch events in its rendered bounds — which overlaps with the absolutely-positioned close button (top: 0.5rem, right: 0.5rem). As a result, tapping the X button had no effect on Android tablets (tested on Samsung Galaxy Tab A8 / Android 14 and Lenovo Tab M10 / Android 12). NcDialog intentionally sets modal-container__content to overflow: hidden and handles scrolling one level deeper at dialog__content. The NMC override was defeating this by making the outer container a touch scroll target. Fix: separate the combined &__content, .dialog__content selector so that overflow-y: auto only applies to .dialog__content (where scrolling belongs), leaving modal-container__content without an overflow override. NcDialog's own scoped CSS (overflow: hidden) now applies correctly, eliminating the touch event interception on Android. --- css/layouts/modal.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/css/layouts/modal.scss b/css/layouts/modal.scss index 1e95cc2..72774a8 100644 --- a/css/layouts/modal.scss +++ b/css/layouts/modal.scss @@ -59,8 +59,7 @@ touch-action: manipulation; } - &__content, .dialog__content { - overflow-y: auto; + &__content { padding-inline: 0; .button-vue--vue-secondary { @@ -126,6 +125,11 @@ } } + .dialog__content { + overflow-y: auto; + padding-inline: 0; + } + &:has(.modal__content--exif) { padding: 0;