1.5

Code refactoring
Profile fixes
Table fixes
Animation additions

assets/css/ui.css

@@ -5,24 +5,62 @@
 /* ── EVENT BANNER ───────────────────────────────────────────────────── */
 /* Animated slide-down banner for cosmic/weather/promo events.           */
 
+/* Open/close: grow vertically using grid-template-rows (silky smooth,
+   no max-height hack — it animates from 0fr → 1fr and back).           */
 .event-banner-wrap {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.event-banner-wrap > * {
   overflow: hidden;
-  max-height: 0;
-  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .event-banner-wrap.visible {
-  max-height: 120px;
+  grid-template-rows: 1fr;
 }
+/* When closing, fade the content out before the row collapses */
+.event-banner-wrap:not(.visible) .event-banner-stage {
+  opacity: 0;
+}
+
+/* Slide crossfade: both banners rendered simultaneously, fading into each other */
+@keyframes banner-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes banner-fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+/* Container that holds both slides during a crossfade */
+/* Also fades in/out with the wrap open/close */
+.event-banner-stage {
+  opacity: 1;
+  transition: opacity 0.35s ease;
+  position: relative;
+  margin-bottom: 12px;
+}
+
 .event-banner {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 13px 18px;
   border-radius: 4px;
-  margin-bottom: 12px;
   position: relative;
   border-left: 4px solid rgba(255,255,255,0.25);
 }
+
+/* Single-element crossfade — content swaps during the transition gap */
+.event-banner.banner-exiting {
+  animation: banner-fade-out 0.4s ease both;
+  pointer-events: none;
+}
+
+.event-banner.banner-entering {
+  animation: banner-fade-in 0.4s ease both;
+}
 .event-banner-emoji {
   font-size: 24px;
   flex-shrink: 0;
@@ -85,12 +123,12 @@
   opacity: 0.75;
 }
 
-/* Cell tag — tiny event icon in the hour column */
+/* Cell tag — event icon in the hour column */
 .event-cell-tag {
-  font-size: 11px;
+  font-size: 15px;
   line-height: 1;
   vertical-align: middle;
-  margin-left: 3px;
+  margin-left: 1px;
   display: inline-block;
   cursor: pointer;
   border-radius: 3px;
@@ -236,10 +274,6 @@
 
 /* ── EVENT BANNER — mobile fixes ────────────────────────────────────── */
 @media (max-width: 640px) {
-  .event-banner-wrap.visible {
-    max-height: 260px;           /* generous — banner can be tall with dates line */
-  }
-
   .event-banner-wrap {
     margin-top: 8px;             /* push banner clear of the fixed nav bar */
     margin-bottom: 18px;         /* breathing room between banner and header */