From 1833181dc9e8811f52083623e9a283b396a5fb97 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 27 Aug 2025 21:58:08 -0600
Subject: [PATCH] mejora ui

---
 client/src/components/EventChart.vue | 102 +++++++++++++++++++++++++--
 1 file changed, 96 insertions(+), 6 deletions(-)

diff --git a/client/src/components/EventChart.vue b/client/src/components/EventChart.vue
index 559118a..9c0b481 100644
--- a/client/src/components/EventChart.vue
+++ b/client/src/components/EventChart.vue
@@ -245,7 +245,8 @@ function friendlyEventName(eventType: string): string {
   box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.4); 
   backdrop-filter: blur(8px) saturate(120%); 
   -webkit-backdrop-filter: blur(8px) saturate(120%); 
-  transition: all 0.3s ease; 
+  transition: all 0.3s ease;
+  min-width: 160px;
 }
 
 .bar-row:hover .bar-chip { 
@@ -254,7 +255,7 @@ function friendlyEventName(eventType: string): string {
 }
 
 .event-icon { 
-  font-size: 14px; 
+  font-size: 16px; 
 }
 
 .chip-label { 
@@ -262,16 +263,18 @@ function friendlyEventName(eventType: string): string {
   color: #0f172a; 
   letter-spacing: .1px; 
   white-space: nowrap; 
-  font-size: 13px; 
+  font-size: 14px; 
+  flex: 1;
+  text-align: center;
 }
 
 .chip-count { 
-  padding: 2px 6px; 
+  padding: 3px 8px; 
   border-radius: 999px; 
   font-weight: 800; 
-  font-size: 11px; 
+  font-size: 12px; 
   box-shadow: 0 1px 3px rgba(0,0,0,0.06); 
-  margin-left: 2px; 
+  margin-left: 4px; 
 }
 
 .chip-count.global { 
@@ -306,4 +309,91 @@ function friendlyEventName(eventType: string): string {
   font-size: 12px; 
   color: #64748b; 
 }
+
+/* Responsive chip sizing */
+@media (min-width: 1200px) {
+  .bar-chip {
+    min-width: 200px;
+    padding: 6px 12px;
+    gap: 8px;
+  }
+  
+  .event-icon {
+    font-size: 16px;
+  }
+  
+  .chip-label {
+    font-size: 14px;
+  }
+  
+  .chip-count {
+    padding: 3px 8px;
+    font-size: 12px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1199px) {
+  .bar-chip {
+    min-width: 140px;
+    padding: 5px 10px;
+    gap: 6px;
+  }
+  
+  .event-icon {
+    font-size: 14px;
+  }
+  
+  .chip-label {
+    font-size: 12px;
+  }
+  
+  .chip-count {
+    padding: 2px 6px;
+    font-size: 10px;
+  }
+}
+
+@media (max-width: 767px) {
+  .bar-chip {
+    min-width: 120px;
+    padding: 4px 8px;
+    gap: 4px;
+  }
+  
+  .event-icon {
+    font-size: 12px;
+  }
+  
+  .chip-label {
+    font-size: 11px;
+  }
+  
+  .chip-count {
+    padding: 2px 4px;
+    font-size: 9px;
+    margin-left: 2px;
+  }
+}
+
+@media (max-width: 480px) {
+  .bar-chip {
+    min-width: 100px;
+    padding: 3px 6px;
+    gap: 3px;
+  }
+  
+  .event-icon {
+    font-size: 11px;
+  }
+  
+  .chip-label {
+    font-size: 10px;
+  }
+  
+  .chip-count {
+    padding: 1px 3px;
+    font-size: 8px;
+    margin-left: 1px;
+  }
+}
 </style>
\ No newline at end of file