fix(ui): согласовать первый экран и pending #16

components/browser-upload.php

@@ -23,6 +23,19 @@
             }
             output.textContent = '.'.repeat(dots);
         },
+        setPending(form, pending) {
+            if (pending) form.dataset.uploadPending = 'true';
+            else delete form.dataset.uploadPending;
+            const link = form.querySelector('[data-files-picker]');
+            if (!link) return;
+            if (pending) {
+                link.setAttribute('aria-disabled', 'true');
+                link.setAttribute('tabindex', '-1');
+            } else {
+                link.removeAttribute('aria-disabled');
+                link.removeAttribute('tabindex');
+            }
+        },
         bindPicker(form, mainInput, fullAccept, onFiles) {
             if (mobile) form.dataset.mobileUpload = '1';
             const sync = () => {
@@ -32,6 +45,36 @@
             sync();
             // Dropzone пересоздаёт input после каждого выбора: обновляем до native click.
             form.addEventListener('click', sync, true);
+            // svh не меняется при движении панелей браузера. На старых движках
+            // сохраняем минимальную высоту до смены ширины/ориентации.
+            const index = form.closest('.index-mobile-fit');
+            if (index) {
+                const probe = document.createElement('span');
+                probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;height:100vh;height:100svh;width:0';
+                index.append(probe);
+                let lastWidth = 0, fallbackHeight = Infinity;
+                const fit = () => {
+                    if (innerWidth !== lastWidth) fallbackHeight = Infinity;
+                    lastWidth = innerWidth;
+                    const height = probe.getBoundingClientRect().height;
+                    fallbackHeight = Math.min(fallbackHeight, height);
+                    const budget = window.CSS?.supports('height', '100svh') ? height : fallbackHeight;
+                    index.style.setProperty('--index-small-height', budget + 'px');
+                    index.dataset.compactUpload = budget < 650 ? 'true' : 'false';
+                    const hero = index.querySelector('#image-compare');
+                    if (hero) hero.style.setProperty('--compare-width', hero.getBoundingClientRect().width + 'px');
+                };
+                fit();
+                window.addEventListener('resize', fit);
+                if (window.ResizeObserver) new ResizeObserver(fit).observe(index);
+            }
+            if (mobile && form.dataset.photoLabel && !form.querySelector('[data-other-files][multiple]')) {
+                const label = form.querySelector('[data-upload-label]');
+                if (label) {
+                    label.textContent = form.dataset.photoLabel;
+                    label.dataset.pickerLabel = form.dataset.photoLabel;
+                }
+            }
             if (!android) return;
             const link = form.querySelector('[data-files-picker]');
             const other = form.querySelector('[data-other-files]');