diff --git a/assets/css/table.css b/assets/css/table.css
index d934ff9..ce51a9a 100644
--- a/assets/css/table.css
+++ b/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
diff --git a/assets/js/app.js b/assets/js/app.js
index c976f1b..9afa82e 100644
--- a/assets/js/app.js
+++ b/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>`;
               };