Stop event banner size shifting
This commit is contained in:
fraxle
2026-08-02 17:06:31 +01:00
parent 249f284593
commit ec211314e0
2 changed files with 53 additions and 19 deletions
+20 -4
View File
@@ -257,18 +257,34 @@ body {
background: rgba(0, 0, 0, 0.55);
}
/* Slide stack. Every active event is rendered and every slide is placed in the
same single grid cell, so the strip's height is set by the TALLEST slide and
stays put as the rotation cycles — a one-line event followed by a message
that wraps to two lines no longer grows the banner and shunts the page. */
.event-note-stack {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
flex: 1;
min-width: 0;
}
.event-note-slide {
grid-area: 1 / 1; /* stack all slides on top of each other */
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 10px;
flex: 1;
min-width: 0;
opacity: 1;
opacity: 0; /* only .is-active is visible */
pointer-events: none;
user-select: none; /* keeps hidden copy out of a drag-selection */
transition: opacity 0.35s ease;
}
.event-note-slide.is-fading {
opacity: 0;
.event-note-slide.is-active {
opacity: 1;
pointer-events: auto;
user-select: auto;
}
.event-note-emoji {