feat(workspace): frameless console that blends into its card
The tab bar and terminal lose their bordered box: the bar keeps one divider with an accent underline on the active tab, and the terminal is painted in the card's colour (--surface-3) instead of the page's. That made a long-standing overflow visible: xterm re-measures its cell only on a font option change or a resize, so a webfont landing after open left the fit on the fallback font's cell and the rows/cols spilled out of the pane. Re-set the family and refit on document.fonts loadingdone.
This commit is contained in:
@@ -99,20 +99,22 @@ export function ConsoleTabs({
|
||||
"flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm text-fg-secondary hover:bg-surface-4 hover:text-fg-primary";
|
||||
|
||||
return (
|
||||
<div className="flex h-10 shrink-0 items-stretch rounded-t-lg border border-b-0 border-border bg-surface-2">
|
||||
<div className="flex h-10 shrink-0 items-stretch border-b border-border">
|
||||
<div role="tablist" aria-label={t("tabs.label")} className="flex min-w-0 items-stretch">
|
||||
{tabs.map((r) => {
|
||||
const active = r.id === activeRunId;
|
||||
return (
|
||||
<div
|
||||
key={r.id}
|
||||
className={`group relative flex min-w-0 max-w-[15rem] items-center border-r border-border ${
|
||||
className={`group relative flex min-w-0 max-w-[15rem] items-center rounded-t-md ${
|
||||
active
|
||||
? "bg-surface-0 text-fg-primary"
|
||||
: "text-fg-muted hover:bg-surface-3 hover:text-fg-secondary"
|
||||
? "text-fg-primary"
|
||||
: "text-fg-muted hover:bg-surface-4 hover:text-fg-secondary"
|
||||
}`}
|
||||
>
|
||||
{active && <span className="absolute inset-x-0 top-0 h-0.5 bg-accent" />}
|
||||
{active && (
|
||||
<span className="absolute inset-x-2 -bottom-px h-0.5 rounded-full bg-accent" />
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
|
||||
Reference in New Issue
Block a user