lda.chat/lda-wf
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent prepared lifecycle narrow overlap

Browse Source
This commit is contained in:
lda
2026-07-13 13:18:59 +07:00 Verified
parent 60a5d3a4df
commit 3d51ac1a9e
4 changed files with 63 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/apps/console/src/presentation/authoring/PreparedAuthoringLifecycleScene.test.tsx
+1
View File
@@ -60,6 +60,7 @@ describe("PreparedAuthoringLifecycleScene", () => {
const frame = screen.getByRole("region", { name: /active authoring operation/i });
expect(frame).toHaveTextContent("workflow.draft_workspaces.set_step_output_map");
expect(frame).toHaveTextContent(/wf draft set-output lda_report_workflow/i);
expect(frame).toHaveTextContent(/prepared workflow lifecycle/i);
expect(frame).toHaveAttribute("data-authoring-step", "repair");
expect(frame.querySelector('[data-authoring-focus="repair"]')).toBeInTheDocument();
expect(screen.getByRole("region", { name: "validation repair evidence" })).toHaveAttribute(
web/apps/console/src/presentation/authoring/PreparedAuthoringLifecycleScene.tsx
+2 -1
View File
@@ -38,7 +38,7 @@ const steps = [
* Each beat shows a persistent prepared assistant beside one dominant phase
* projection sourced from the prepared authoring recording.
*/
export const PreparedAuthoringLifecycleScene = ({ beat, onAdvance }: PreparedAuthoringLifecycleSceneProps) => {
export const PreparedAuthoringLifecycleScene = ({ scene, beat, onAdvance }: PreparedAuthoringLifecycleSceneProps) => {
const [messageState, dispatch] = useReducer(
preparedLifecycleMessageReducer,
initialPreparedLifecycleMessageState,
@@ -109,6 +109,7 @@ export const PreparedAuthoringLifecycleScene = ({ beat, onAdvance }: PreparedAut
>
<header className="prepared-lifecycle-scene__frame-header">
<div>
<span className="prepared-lifecycle-scene__context">{scene.title}</span>
<span className="prepared-lifecycle-scene__frame-step">{activeStep.label}</span>
<h2>{beat.title}</h2>
<p>{beat.caption}</p>
web/apps/console/src/presentation/presentation-css.test.ts
+26
View File
@@ -177,6 +177,18 @@ describe("presentation.css", () => {
const narrowContainer = cssBlock(css, "@container presentation-canvas (max-width: 600px)") ?? "";
const narrowScene = cssBlocks(narrowContainer, ".prepared-lifecycle-scene")
.find((body) => body.includes("grid-template-columns: minmax(0, 1fr);") && body.includes("grid-template-areas:"));
const narrowPresentation = cssBlocks(
narrowContainer,
'.prepared-lifecycle-scene[data-presentation-surface="editorial"] > .prepared-lifecycle-scene__presentation',
).find((body) => body.includes("height: max-content;"));
const narrowFrame = cssBlocks(
narrowContainer,
'.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame',
).find((body) => body.includes("min-height: max-content;"));
const narrowAssistant = cssBlocks(
narrowContainer,
'.prepared-lifecycle-scene[data-presentation-surface="editorial"] > .presentation-assistant-pane',
).find((body) => body.includes("height: min(24rem, 60vh);"));
expect(compactScene).toContain("overflow: visible;");
expect(compactFrame).toContain("grid-template-rows: auto auto;");
@@ -186,6 +198,20 @@ describe("presentation.css", () => {
expect(compactRepair).toContain("min-width: 0;");
expect(narrowScene).toContain("grid-template-columns: minmax(0, 1fr);");
expect(narrowScene).toContain('grid-template-areas: "presentation" "assistant";');
expect(narrowScene).toContain("grid-template-rows: max-content max-content;");
expect(narrowScene).toContain("align-content: start;");
expect(narrowScene).toContain("min-height: max-content;");
expect(narrowScene).toContain("height: max-content;");
expect(narrowScene).toContain("flex: 0 0 auto;");
expect(narrowPresentation).toContain("grid-template-rows: auto max-content;");
expect(narrowPresentation).toContain("overflow: visible;");
expect(narrowPresentation).not.toContain("overflow: auto;");
expect(narrowFrame).toContain("height: max-content;");
expect(narrowFrame).toContain("overflow: visible;");
expect(narrowFrame).not.toContain("overflow: auto;");
expect(narrowAssistant).toContain("min-height: 14rem;");
expect(narrowAssistant).toContain("height: min(24rem, 60vh);");
expect(narrowAssistant).toContain("max-height: min(24rem, 60vh);");
});
it("bounds prepared conversation scrolling and recenters the agent handoff at compact stage widths", () => {
web/apps/console/src/presentation/presentation.css
+34
View File
@@ -3802,6 +3802,15 @@
text-transform: uppercase;
}
.prepared-lifecycle-scene__context {
display: block;
margin-bottom: 0.3rem;
color: var(--text-secondary);
font: 600 0.62rem/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.prepared-lifecycle-scene__evidence {
display: grid;
gap: 0.5rem;
@@ -4002,6 +4011,10 @@
color: var(--authoring-muted);
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__context {
color: var(--authoring-muted);
}
/* Diagnose and Repair are distinct editorial cuts of the recorded validate phase. */
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] {
grid-template-columns: minmax(0, 1fr);
@@ -4219,17 +4232,38 @@
@container presentation-canvas (max-width: 600px) {
.prepared-lifecycle-scene[data-presentation-surface="editorial"] {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: max-content max-content;
grid-template-areas: "presentation" "assistant";
align-content: start;
min-height: max-content;
height: max-content;
flex: 0 0 auto;
overflow: visible;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] > .prepared-lifecycle-scene__presentation {
grid-area: presentation;
grid-template-rows: auto max-content;
align-self: start;
min-height: max-content;
height: max-content;
overflow: visible;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame {
grid-template-rows: auto max-content;
align-self: start;
min-height: max-content;
height: max-content;
overflow: visible;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] > .presentation-assistant-pane {
grid-area: assistant;
align-self: start;
min-height: 14rem;
height: min(24rem, 60vh);
max-height: min(24rem, 60vh);
}
}