border: 1px solid var(--border);

border-radius: var(--radius-md);

background: var(--card);

max-height: calc(100vh - 280px); /* top nav + filter bar + page padding + breathing room */

/* Default sizing for non-fill-height hosts; .card--fill-height overrides below. */

max-height: calc(100vh - 280px);

min-height: 200px;

overflow: auto;

container-type: inline-size;

}

/* Fill-height card: flex column that consumes the remaining settings-workspace

body height. `.content--logs` owns the ancestor chain. */

.card--fill-height {

display: flex;

flex-direction: column;

flex: 1 1 auto;

min-height: 0;

}

.card--fill-height .log-stream {

flex: 1 1 auto;

min-height: 0;

max-height: none;

}

.log-row {

display: grid;

grid-template-columns: 90px 70px minmax(140px, 200px) minmax(0, 1fr);

width: 100%;

}

/* Logs opt into a fill-height chain so the log stream, not the page, owns

desktop scrolling. Other settings routes keep the default `.content` scroll.

The chain works because the entire ancestor stack is converted to flex

columns so the workspace can take the remaining viewport after the

`.content-header` breadcrumb without triggering `.content`'s overflow scroll. */

.content--logs {

display: flex;

flex-direction: column;

overflow: hidden;

}

.content--logs .settings-workspace {

flex: 1 1 auto;

min-height: 0;

display: flex;

flex-direction: column;

height: auto;

}

.content--logs .settings-workspace__body {

flex: 1 1 auto;

min-height: 0;

display: flex;

flex-direction: column;

}

.settings-section-nav {

display: flex;

flex-wrap: wrap;

);

});

it("scopes the logs fill-height chain to the explicit logs route class", () => {

expect(css).toContain(".content--logs {");

expectSelectorBlockToMatch(".content--logs", /overflow:\s*hidden;/);

expectSelectorBlockToMatch(".content--logs .settings-workspace", /display:\s*flex;/);

expectSelectorBlockToMatch(".content--logs .settings-workspace__body", /min-height:\s*0;/);

expect(css).not.toContain(":has(.card--fill-height)");

});

it("avoids transition-all in the quick settings surface", () => {

expect(css).not.toContain("transition: all");

});

max-height: 380px;

}

/* Reset the desktop fill-height chain on mobile — single page scroll is

more usable on small viewports than a tiny pinned log panel.

Selectors are intentionally double-classed so they outrank the

desktop rules in components.css / config-quick.css, which are

imported AFTER this file (see ui/src/styles.css). */

.card--fill-height.card--fill-height .log-stream {

flex: none;

min-height: 200px;

max-height: 380px;

}

.content.content--logs {

display: block;

overflow-y: auto;

}

.content.content--logs .settings-workspace {

display: block;

height: auto;

flex: initial;

}

.content.content--logs .settings-workspace__body {

display: block;

flex: initial;

}

.log-row {

grid-template-columns: 1fr;

gap: 4px;

}

}

});

it("restores single-page logs scrolling on mobile", () => {

const mobileCss = readMobileCss();

expect(mobileCss).toContain(".content.content--logs {");

expect(mobileCss).toMatch(

/\.content\.content--logs \{[\s\S]*display: block;[\s\S]*overflow-y: auto;/,

);

expect(mobileCss).toMatch(

/\.content\.content--logs \.settings-workspace \{[\s\S]*display: block;/,

);

expect(mobileCss).toMatch(

/\.card--fill-height\.card--fill-height \.log-stream \{[\s\S]*max-height: 380px;/,

);

});

});

describe("sidebar menu trigger styles", () => {

expect(shell?.style.getPropertyValue("--chat-message-max-width")).toBe("min(1280px, 82%)");

});

it("marks the logs route so the page can hand scroll ownership to the log stream", () => {

const container = document.createElement("div");

render(renderApp(createState({ tab: "logs" })), container);

const content = container.querySelector<HTMLElement>("main.content");

expect(content?.classList.contains("content--logs")).toBe(true);

expect(content?.classList.contains("content--chat")).toBe(false);

});

it("passes security quick setting fields to Quick Settings", () => {

const state = createState({

configForm: {

</div>

</aside>

</div>

<main class="content ${isChat ? "content--chat" : ""}">

<main

class="content ${isChat ? "content--chat" : ""} ${state.tab === "logs"

? "content--logs"

: ""}"

>

${state.updateStatusBanner

? html`<div class="callout ${state.updateStatusBanner.tone}" role="alert">

${state.updateStatusBanner.text}

const exportLabel = needle || levelFiltered ? "filtered" : "visible";

return html`

<section class="card">

<section class="card card--fill-height">

<div class="row" style="justify-content: space-between;">

<div>

<div class="card-title">Logs</div>