From 54a0c4fbd57945270cc566b4d9947073a6a47b2c Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Thu, 6 Nov 2025 20:45:22 -0600
Subject: [PATCH] [Issue #103] Agregar max-height y scroll a submenus del
 navbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../themes/apus-theme/assets/css/style.css    | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/wp-content/themes/apus-theme/assets/css/style.css b/wp-content/themes/apus-theme/assets/css/style.css
index 7f84f367..969a5067 100644
--- a/wp-content/themes/apus-theme/assets/css/style.css
+++ b/wp-content/themes/apus-theme/assets/css/style.css
@@ -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;
 }