diff --git a/frontend/src/components/base/SearchModal.astro b/frontend/src/components/base/SearchModal.astro index 8092e90..f174cd1 100644 --- a/frontend/src/components/base/SearchModal.astro +++ b/frontend/src/components/base/SearchModal.astro @@ -67,11 +67,42 @@ const title = 'Поиск по статьям'; return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' }); } + function updateResultsHeight() { + const viewport = window.visualViewport; + let availableHeight; + + if (viewport) { + availableHeight = viewport.height; + } else { + availableHeight = window.innerHeight; + } + + const modalContainer = modal.querySelector('.modal-container'); + if (!modalContainer) return; + + const modalRect = modalContainer.getBoundingClientRect(); + const headerHeight = modalRect.top + 80; + const inputHeight = 60; + const padding = 40; + + const resultsMaxHeight = availableHeight - headerHeight - inputHeight - padding; + resultsContainer.style.maxHeight = `${Math.max(200, resultsMaxHeight)}px`; + } + function openModal() { modal.classList.add('active'); modal.setAttribute('aria-hidden', 'false'); document.body.style.overflow = 'hidden'; - setTimeout(() => searchInput.focus(), 200); + setTimeout(() => { + searchInput.focus(); + updateResultsHeight(); + }, 200); + + if (window.visualViewport) { + window.visualViewport.addEventListener('resize', updateResultsHeight); + } else { + window.addEventListener('resize', updateResultsHeight); + } } function closeModal() { @@ -80,6 +111,13 @@ const title = 'Поиск по статьям'; document.body.style.overflow = ''; searchInput.value = ''; resultsContainer.innerHTML = ''; + resultsContainer.style.maxHeight = ''; + + if (window.visualViewport) { + window.visualViewport.removeEventListener('resize', updateResultsHeight); + } else { + window.removeEventListener('resize', updateResultsHeight); + } } async function handleSearch(query) { @@ -253,6 +291,20 @@ const title = 'Поиск по статьям'; display: flex; flex-direction: column; gap: 16px; + max-height: 400px; + transition: max-height 0.3s ease; + } + + @media (max-width: 640px) { + .search-results { + max-height: 300px; + } + } + + @media (max-height: 500px) { + .search-results { + max-height: 200px; + } } .search-result-item {