mirror of
https://github.com/deepseek-ai/deepseek-harness
synced 2026-08-15 21:04:50 +00:00
e6d6e192d5
Making `.sources` a scroll container turned its `padding-left` from spacing into a correctness constraint. A scroll container clips inline-start overflow with no way to scroll it back, and `::marker` is right-aligned to the content edge, so past nine sources the markers rendered as `0.` and `1.` where `10.` and `11.` belonged. `searchMaxResults` is an unbounded positive integer, so size the padding in `em` against the list's own font to hold a three-digit marker. The browser e2e measures a `999. ` marker in that inherited font and requires the computed padding to be at least that wide, pinning the room against the widest marker rather than one fixture's source count.
131 lines
3.3 KiB
CSS
131 lines
3.3 KiB
CSS
/* Geometry mirrors CodeBlock/TerminalBlock (12px radius, code-block surface,
|
|
16px vertical margin) so a web card, a terminal card, and a fenced code block
|
|
read as one family. A source list is prose, not aligned output, so each row
|
|
wraps horizontally rather than scrolling sideways like a terminal card; the
|
|
list as a whole scrolls vertically within a capped height (see .sources). */
|
|
|
|
.block {
|
|
--dsl-web-radius: 12px;
|
|
|
|
margin: 16px 0;
|
|
padding: 12px 14px;
|
|
color: var(--dsw-alias-label-primary);
|
|
background: var(--dsw-alias-markdown-code-block);
|
|
border-radius: var(--dsl-web-radius);
|
|
}
|
|
|
|
/* The provider answer reads as body prose above the citation list; its own
|
|
MarkdownText margins are trimmed so the list sits tight under it. */
|
|
.answer {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.answer > :global(div) > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.answer > :global(div) > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* The citation list: ordered so each source reads as a numbered reference. The
|
|
whole list — the sources the tool returned, matching what the model saw —
|
|
renders here; a max-height caps the card so a long list scrolls in place
|
|
rather than growing the card unbounded. The height is a design constant of the
|
|
card's geometry, not a deployment choice, so it lives here rather than a plugin
|
|
config field.
|
|
|
|
`overflow-y` makes this a scroll container, which also clips inline-start
|
|
overflow: a marker wider than `padding-left` loses its leading digits with no
|
|
way to scroll them back. Markers are right-aligned to the content edge, so the
|
|
padding must fit the widest one the list can produce. `searchMaxResults` is an
|
|
unbounded positive integer, so the padding is sized in `em` — against this
|
|
element's own font, the one a marker inherits — to hold a three-digit marker
|
|
(`999. ` measures 2.35em in the app font stack) plus the gap the one-digit
|
|
case already had. */
|
|
.sources {
|
|
margin: 0;
|
|
padding-left: 2.5em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
max-height: 320px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.source {
|
|
min-width: 0;
|
|
}
|
|
|
|
.sourceLink {
|
|
color: var(--dsw-alias-state-business-primary);
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.sourceLink:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.snippet {
|
|
margin-top: 2px;
|
|
color: var(--dsw-alias-label-secondary);
|
|
font-size: 13px;
|
|
line-height: 19px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.published {
|
|
margin-top: 2px;
|
|
color: var(--dsw-alias-label-tertiary);
|
|
font: var(--dsw-font-xs-13);
|
|
}
|
|
|
|
.truncated {
|
|
margin-top: 8px;
|
|
color: var(--dsw-alias-label-tertiary);
|
|
font: var(--dsw-font-xs-13);
|
|
}
|
|
|
|
.empty {
|
|
color: var(--dsw-alias-label-secondary);
|
|
font: var(--dsw-font-xs-13);
|
|
}
|
|
|
|
/* The fetch card is a compact summary: the URL over a status/truncation row. */
|
|
.fetch {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.fetchUrl {
|
|
color: var(--dsw-alias-state-business-primary);
|
|
font-family: var(--ds-font-family-code);
|
|
font-size: 13px;
|
|
line-height: 19px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.fetchUrl:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.fetchMeta {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 12px;
|
|
}
|
|
|
|
.status {
|
|
color: var(--dsw-alias-label-secondary);
|
|
font: var(--dsw-font-xs-13);
|
|
}
|
|
|
|
/* The fetch card's truncation note sits inline beside the status, so it drops
|
|
the search card's top margin. */
|
|
.fetch .truncated {
|
|
margin-top: 0;
|
|
}
|