5.0.1

Fix flipped table alignments

assets/css/table.css

@@ -1746,6 +1746,16 @@
   flex-shrink: 0;
 }
 
+/* Event tags are grouped rather than left as loose siblings so that when
+   the rotated view stacks the time cell into a column, they stay on one
+   horizontal line instead of forming a vertical stack of their own. The
+   gap matches .utci-time-inner so the inline layout is unchanged. */
+.utci-time-tags {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+
 @media (max-width: 800px) {
   .utci-time {
     font-size: 15px;
@@ -2605,6 +2615,13 @@
   min-width: 76px;
 }
 
+/* Top-aligned so every scope sits on the same line. The header row is as
+   tall as its tallest cell — an hour carrying event tags — and centring
+   would push the emptier hours down out of step with it. */
+.utci-table-rotated thead th.rot-hour-th {
+  vertical-align: top;
+}
+
 /* Stacked, not inline: rotated, every hour is its own COLUMN, so sitting
    the scope beside the time would set the width of all of them. Stacking
    puts the scope over the label and lets the columns stay narrow. The

assets/js/app.js

@@ -1405,14 +1405,17 @@ export function UTCIForecast() {
                   <span class="utci-time-inner">
                     <${SkyScope} elev=${r.elev} dt=${r.dt} glob=${r.glob} size=${38} />
                     <span>${localHHMM}</span>
-                    ${rowEvents.map((ev, idx) => html`
-                      <span key=${ev.id} class="event-cell-tag"
-                        onClick=${(e) => handleEventTagClick(rowEvents, idx, e)}
-                        onMouseEnter=${(e) => handleEventTagEnter(rowEvents, idx, e)}
-                        onMouseLeave=${handleEventTagLeave}
-                        role="button" tabIndex="0" aria-label=${ev.title}
-                      >${ev.emoji}</span>
-                    `)}
+                    ${rowEvents.length > 0 && html`
+                      <span class="utci-time-tags">
+                        ${rowEvents.map((ev, idx) => html`
+                          <span key=${ev.id} class="event-cell-tag"
+                            onClick=${(e) => handleEventTagClick(rowEvents, idx, e)}
+                            onMouseEnter=${(e) => handleEventTagEnter(rowEvents, idx, e)}
+                            onMouseLeave=${handleEventTagLeave}
+                            role="button" tabIndex="0" aria-label=${ev.title}
+                          >${ev.emoji}</span>
+                        `)}
+                      </span>`}
                   </span>`;
               };