live feed termiando 60%

ui/src/components/realtime/RealtimeEventCard.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="['realtime-event', eventBgClass]">
-    <p class="text-xs text-gray-500 mb-1">
+    <p class="event-chip mb-2" :class="operationClass">
+      <span class="event-icon">{{ operationIcon }}</span>
       {{ event.operation }} · {{ event.table }} • {{ formatTimestamp(event.receivedAt) }}
     </p>
     <template v-if="event.operation === 'UPDATE'">
@@ -10,6 +11,7 @@
           :is="component"
           v-bind="componentPropsOld"
           class="old-card opacity-70"
+          style="max-width: 350px;"
         />
         <span class="text-2xl">→</span>
         <component
@@ -17,6 +19,7 @@
           :is="component"
           v-bind="componentPropsNew"
           class="new-card"
+          style="max-width: 350px;"
         />
       </div>
     </template>
@@ -24,6 +27,7 @@
       v-else-if="component"
       :is="component"
       v-bind="componentProps"
+      style="max-width: 400px;"
     />
   </div>
 </template>
@@ -80,21 +84,85 @@ const formatTimestamp = (ts) => {
 }
 
 const eventBgClass = computed(() => {
-  if (props.event.operation === 'DELETE') return 'bg-red-100/40'
+  if (props.event.operation === 'DELETE') return 'delete-card'
-  if (props.event.operation === 'INSERT') return 'bg-green-100/40'
+  if (props.event.operation === 'INSERT') return 'insert-card'
   return ''
 })
+
+const operationIcon = computed(() => {
+  switch (props.event.operation) {
+    case 'INSERT': return '➕'
+    case 'DELETE': return '🗑️'
+    case 'UPDATE': return '✏️'
+    default: return ''
+  }
+})
+
+const operationClass = computed(() => {
+  switch (props.event.operation) {
+    case 'INSERT': return 'insert-chip'
+    case 'DELETE': return 'delete-chip'
+    case 'UPDATE': return 'update-chip'
+    default: return ''
+  }
+})
+
+
 </script>
 
 <style scoped>
 .realtime-event {
   margin-bottom: 1rem;
   padding: 0.5rem;
-  border-radius: 0.375rem;
 }
 
 .old-card,
 .new-card {
   flex: 1 1 0%;
 }
+.delete-card {
+  opacity: 0.7;
+}
+.insert-card {
+  opacity:  0.7;
+
+}
+.event-chip {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0.3), transparent);
+}
+
+
+.event-icon {
+  margin-right: 0.4rem;
+  font-size: 1rem;
+  line-height: 1;
+}
+
+/* Colores con efecto degradado y contraste 3D */
+.insert-chip {
+  background-color: #d1fae5;
+  color: #065f46;
+  background-image: linear-gradient(to top left, #e3f7ea, #36f190);
+}
+
+.delete-chip {
+  background-color: #fecaca;
+  color: #7f1d1d;
+  background-image: linear-gradient(to top left, #ffd3d3, #ee2424);
+}
+
+.update-chip {
+  background-color: #fef08a;
+  color: #000000;
+  background-image: linear-gradient(to top left, #8a898a, #9a10e9);
+}
+
 </style>

ui/src/views/RealtimeFeedView.vue

@@ -19,13 +19,14 @@ onMounted(() => {
     <transition-group
       name="feed"
       tag="div"
-      class="feed-list pr-2"
+      class="feed-list"
-      style="max-height: calc(100vh - 160px);"
+      style="max-height: calc(100vh - 160px); min-width: 60vw;"
     >
       <RealtimeEventCard
         v-for="(ev, idx) in realtime.events"
         :key="ev.receivedAt + idx"
         :event="ev"
+        style="max-width: 100%; border-bottom: white 1px solid; padding: 20px 0 40px 20px ;"
       />
       <div v-if="realtime.events.length === 0" class="text-center text-gray-500 mt-4">
         No hay eventos aún.
@@ -37,7 +38,7 @@ onMounted(() => {
 <style scoped>
 .realtime-feed-container {
   padding: 20px;
-  max-width: 1500px;
+  width: 70vw;
   margin: 0 auto;
 }
 
@@ -70,8 +71,9 @@ onMounted(() => {
 }
 
 .feed-list {
+  overflow-x: hidden !important;
   overflow-y: auto;
-  overflow-x: hidden;
+  max-width: 100%;
   scrollbar-width: none; /* Firefox */
 }
 .feed-list::-webkit-scrollbar {