fix(gui): cap the question card height and scroll the option list
The composer seat lives in a fixed-height conversation column with overflow hidden, so a long question batch pushed the footer actions out of reach (review r3635427112). The card now flexes with a viewport- relative max-height, the option list is the scrollable region (ChatView list pattern: min-height 0 + overflow-y auto), and header/footer are flex-shrink 0 so progress, navigation, skip, submit, and cancel stay reachable. Verified in headless chromium against this sheet (900x600 viewport, 30-option batch): card capped at 360px (60vh), the option list scrolls (scrollHeight > clientHeight), and the footer submit/skip buttons stay inside the viewport. jsdom cannot assert layout; the playwright smoke follow-up tracks composer scrolling with the existing debt.
This commit is contained in:
@@ -5,8 +5,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 720px;
|
max-width: 720px;
|
||||||
|
/* Composer seat sits in a fixed-height conversation column (overflow
|
||||||
|
hidden): cap the card against the viewport and scroll the option list
|
||||||
|
so header and footer actions stay reachable on long batches. */
|
||||||
|
max-height: min(60vh, 520px);
|
||||||
padding: 14px 16px 12px;
|
padding: 14px 16px 12px;
|
||||||
border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
|
border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
@@ -25,6 +31,7 @@
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
flex-shrink: 0;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -110,6 +117,9 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
/* The scrollable region of the capped card (ChatView list pattern). */
|
||||||
|
min-height: 0;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.option {
|
.option {
|
||||||
@@ -271,6 +281,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
|
flex-shrink: 0;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
padding: 0 2px;
|
padding: 0 2px;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user