[Issue #103] Agregar max-height y scroll a submenus del navbar

PROBLEMA:
Submenu "Buscador General de Precios Unitarios" tiene 18 elementos
y se oculta fuera de la pantalla, haciendo inaccesibles los últimos.

CAMBIOS:
1. Reducir padding vertical de .dropdown-item (0.625rem → 0.5rem)
   - Ahorra ~64px total con 18 elementos
   - Elementos más compactos visualmente

2. Agregar max-height: 70vh a .dropdown-menu
   - Permite ver ~10-12 elementos simultáneamente
   - Todos los 18 elementos accesibles mediante scroll

3. Activar overflow-y: auto
   - Scroll vertical aparece automáticamente si necesario
   - Solo cuando contenido excede 70vh

4. Mejorar UX del scroll
   - scroll-behavior: smooth (scroll suave)
   - Scrollbar personalizado (6px, color gris)
   - scrollbar-width: thin (Firefox)
   - Custom webkit scrollbar (Chrome, Safari, Edge)

RESULTADO:
 Todos los 18 elementos del submenu son accesibles
 Scroll vertical suave y con estilo personalizado
 Elementos más compactos pero legibles
 Funciona en todos los navegadores modernos

Fixes #103

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-06 20:45:22 -06:00
parent 456dc3c2f2
commit 54a0c4fbd5

View File

@@ -749,11 +749,34 @@ img {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
border-radius: 8px;
padding: 0.5rem 0;
max-height: 70vh;
overflow-y: auto;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: var(--color-gray-400) transparent;
}
/* Webkit browsers (Chrome, Safari, Edge) scrollbar */
.dropdown-menu::-webkit-scrollbar {
width: 6px;
}
.dropdown-menu::-webkit-scrollbar-track {
background: transparent;
}
.dropdown-menu::-webkit-scrollbar-thumb {
background-color: var(--color-gray-400);
border-radius: 3px;
}
.dropdown-menu::-webkit-scrollbar-thumb:hover {
background-color: var(--color-gray-500);
}
.dropdown-item {
color: var(--color-neutral-600);
padding: 0.625rem 1.25rem;
padding: 0.5rem 1.25rem;
transition: all 0.3s ease;
font-weight: 500;
}