fix: cap participant chat column to viewport on long forms
m: "The size of the chat should be limited to the screen size (- frame) so it does not go via the whole long form..." The grid layout (1fr 1fr at ≥900px) was stretching the chat column to match the form column's height. With a 20-question form the right side of the page became a 3000px scroll-soup of empty chat space. Two-line fix: - .fb-participant gets `align-items: start` at ≥900px — grid items take their own natural height instead of stretching to the tallest sibling. - .fb-participant__col--chat gets `max-height: calc(100vh - 2rem)` always + `position: sticky; top: 1rem` at ≥900px. Long form scrolls past it; chat stays pinned in the viewport. On mobile (single-column stack) the existing 70vh cap stays — the desktop max-height applies on top of it, so mobile uses min(70vh, 100vh - 2rem) which is just 70vh. No markup changes — pure CSS.
This commit is contained in:
@@ -1666,6 +1666,10 @@ body { min-height: 100vh; }
|
||||
@media (min-width: 900px) {
|
||||
.fb-participant {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
/* Don't stretch the chat column to match a long form. Each column
|
||||
takes its own natural height; the chat column then caps itself
|
||||
to the viewport via .fb-participant__col--chat below. */
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1700,12 +1704,24 @@ body { min-height: 100vh; }
|
||||
}
|
||||
}
|
||||
|
||||
/* Chat column — bubbles fill the column height, compose pinned at bottom. */
|
||||
/* Chat column — bubbles fill the column height, compose pinned at bottom.
|
||||
The column always caps to the viewport so a long form on the left can't
|
||||
stretch the chat into a 3000px tall scroll-soup. On desktop it sticks to
|
||||
the top so it stays visible while the user scrolls down through the
|
||||
form. On mobile it just caps below the form. */
|
||||
.fb-participant__col--chat {
|
||||
background: var(--color-bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3);
|
||||
min-height: 320px;
|
||||
max-height: calc(100vh - 2rem);
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.fb-participant__col--chat {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 899px) {
|
||||
|
||||
Reference in New Issue
Block a user