From 8f586b47f5b65d813916bf80a796429df504cd05 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sun, 1 Mar 2026 09:32:55 -0500
Subject: [PATCH] Fix layout overflow in stop banner and center offers sheet

---
 frontend/src/views/MapView.vue | 31 ++++++++++++++-----------------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index 1f1fd3a..9ffa1c1 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -601,7 +601,7 @@ async function highlightOptimalStopForRoute() {
           <div id="map" class="map" :style="{ display: isLoaded ? 'block' : 'none' }"></div>
           
           <!-- Floating UI Elements -->
-          <div class="map-floating-controls" :class="{ 'sheet-open': showPromos && couponStore.coupons.length > 0 }">
+          <div class="map-floating-controls">
             <!-- Botón de Ofertas (FAB Simple) -->
             <button
               v-if="isLoaded && !showPromos"
@@ -661,7 +661,7 @@ async function highlightOptimalStopForRoute() {
                 <span class="material-icons text-white text-[16px]">directions_bus</span>
               </div>
               
-              <div class="flex flex-col flex-1 truncate ml-2">
+              <div class="flex flex-col flex-1 truncate ml-2" style="min-width: 0;">
                 <span class="text-[9px] uppercase font-bold text-gray-500 dark:text-gray-400 leading-none">Tiempo de llegada</span>
                 <span class="trigger-text-compact truncate leading-tight">{{ paradaCercana?.name }}</span>
               </div>
@@ -945,12 +945,11 @@ async function highlightOptimalStopForRoute() {
 ═══════════════════════════════════════ */
 .offers-sheet {
   position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 85px;
-  margin: 0 auto;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   width: calc(100% - 32px);
-  max-width: 500px;
+  max-width: 420px;
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(20px) saturate(180%);
   -webkit-backdrop-filter: blur(20px) saturate(180%);
@@ -1322,16 +1321,18 @@ html.light-theme .uber-search-trigger-compact {
   background: var(--header-bg);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
-  height: 40px; /* Más compacto (de 44px a 40px) */
+  height: 40px; 
   border-radius: 10px;
   display: flex;
   align-items: center;
   padding: 0 10px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
   border: 1px solid var(--border-color);
-  max-width: none;
+  max-width: 100%;
+  overflow: hidden;
   pointer-events: auto;
   z-index: 1200;
+  min-width: 0;
 }
 
 /* Animaciones del Banner (Slide de arriba hacia abajo, muy fluido) */
@@ -1578,10 +1579,6 @@ html.light-theme .uber-search-trigger-compact {
   transition: bottom 0.6s cubic-bezier(0.32, 0.72, 0, 1);
 }
 
-.map-floating-controls.sheet-open {
-  bottom: 300px; /* Sube para dejar espacio a las ofertas */
-}
-
 .promos-badge-wrapper {
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -1695,16 +1692,16 @@ html.light-theme .uber-search-trigger-compact {
   100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(254, 231, 21, 0); }
 }
 
-/* Bottom sheet transition - Fluid Slide Up/Down */
+/* Center sheet transition - Fluid Pop */
 .sheet-slide-enter-active {
-  transition: all 0.6s cubic-bezier(0.32, 0.72, 0, 1);
+  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 .sheet-slide-leave-active {
-  transition: all 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .sheet-slide-enter-from,
 .sheet-slide-leave-to {
-  transform: translateY(120%) scale(0.95);
+  transform: translate(-50%, -40%) scale(0.85); /* Emerge ligeramente desde abajo hacia el centro */
   opacity: 0;
 }