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:
Yif
2026-07-31 15:28:22 +08:00
committed by _Kerman
parent 44304a458c
commit 062a1507f1
2 changed files with 21 additions and 3 deletions

View File

@@ -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;
}

View File

@@ -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);
}