feat(ui-trajectory): float the composer over the ledger like chat
The trajectory host kept the composer as a fixed flex sibling, so the ledger never reached the viewport bottom. Anchor the composer seat absolutely over the ledger (reusing chat's fade treatment) and have the internal scroll panes reserve the composer's live height plus a 16px gap so end rows and detail bodies scroll clear of the overlay. (cherry picked from commit 0058a1f4b6e8c2e23bfde7c827a84838cc5ebffc)
This commit is contained in:
@@ -16,6 +16,7 @@
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
padding-bottom: var(--dsh-trajectory-bottom-clearance, 0px);
|
||||
container: trajectory-table / inline-size;
|
||||
}
|
||||
|
||||
@@ -905,6 +906,7 @@
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding-bottom: var(--dsh-trajectory-bottom-clearance, 0px);
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
@@ -912,7 +914,7 @@
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
padding-bottom: 12px;
|
||||
padding-bottom: calc(12px + var(--dsh-trajectory-bottom-clearance, 0px));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -14,9 +14,11 @@
|
||||
}
|
||||
|
||||
/* Trajectory keeps the ledger and details panel inside the remaining
|
||||
* conversation height. Only the ledger pane scrolls; the composer remains
|
||||
* the fixed flex sibling below this view. */
|
||||
* conversation height; only the internal panes scroll. The composer floats
|
||||
* over the ledger like chat's sticky seat — absolute, not sticky, because
|
||||
* this host does not scroll. */
|
||||
:global([data-conversation-scroll]):has(.root) {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -26,6 +28,15 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* div qualifier outranks ConversationRoot's active-phase sticky rule (equal
|
||||
* specificity otherwise, and cross-module source order is bundler-defined). */
|
||||
:global([data-conversation-scroll]):has(.root) > :global(div[data-composer-seat]) {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ledger {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
@@ -35,4 +46,9 @@
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
|
||||
/* Internal panes reserve the floating composer's live height plus a 16px
|
||||
* breathing gap so end rows and detail bodies can scroll clear of the
|
||||
* overlay. */
|
||||
--dsh-trajectory-bottom-clearance: calc(var(--dsh-composer-height, 152px) + 16px);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user