fix: tighten guided proof scene layout

This commit is contained in:
lda
2026-07-10 17:42:09 +07:00 Verified
parent 630baf585f
commit eaaae0e02c
3 changed files with 105 additions and 11 deletions
@@ -855,6 +855,13 @@
grid-template-columns: minmax(0, 1fr) minmax(16rem, 24%);
}
/* Guided proof moments own their support panels internally. The older evidence
layout reserved a second parent column for DemoOutcomePanel, which leaves an
empty gutter after the guided-moment refactor. */
.demo-workflow-stage[data-demo-layout="evidence"]:has(.guided-product-moment) {
grid-template-columns: minmax(0, 1fr);
}
.demo-workflow-stage[data-support-surface="run-receipt"] .operation-receipt[data-operation-variant="receipt"],
.demo-workflow-stage[data-support-surface="output-summary"] .run-facts-card[data-output-priority="summary"] {
opacity: 0.86;
@@ -1192,8 +1199,12 @@
.guided-product-moment {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
justify-self: stretch;
align-self: stretch;
width: 100%;
gap: 0.75rem;
min-height: 0;
box-sizing: border-box;
}
.guided-product-moment__header {
@@ -1232,6 +1243,19 @@
overflow: hidden;
}
.guided-product-moment[data-moment="approval"],
.guided-product-moment[data-moment="resume"],
.guided-product-moment[data-moment="output"],
.guided-product-moment[data-moment="trace"] {
border: 1px solid oklch(0.4 0.04 250 / 0.72);
border-radius: 0.95rem;
padding: 0.9rem;
overflow: hidden;
background:
radial-gradient(circle at 72% 12%, oklch(0.72 0.17 195 / 0.08), transparent 28rem),
oklch(0.105 0.02 250 / 0.96);
}
.guided-product-moment[data-moment="approval"] {
gap: 0.55rem;
}
@@ -1262,7 +1286,7 @@
.guided-product-moment__approval-grid {
display: grid;
grid-template-columns: minmax(11rem, 0.36fr) minmax(0, 1.35fr) minmax(20rem, 0.62fr);
grid-template-columns: minmax(12.5rem, 0.42fr) minmax(0, 1.25fr) minmax(20rem, 0.62fr);
gap: 0.85rem;
min-height: 0;
}
@@ -1277,10 +1301,31 @@
font-size: 0.82rem;
}
.run-facts-card[data-density="compact"] .run-facts-dl {
display: block;
}
.run-facts-card[data-density="compact"] .run-facts-dl dt {
margin: 0.65rem 0 0.25rem;
}
.run-facts-card[data-density="compact"] .run-facts-dl dt:first-child {
margin-top: 0;
}
.run-facts-card[data-density="compact"] .run-facts-dl dd {
margin: 0;
overflow-wrap: anywhere;
}
.run-facts-card[data-density="compact"] .run-facts-list {
gap: 0.28rem;
}
.run-facts-card[data-density="compact"] .run-facts-list li {
overflow-wrap: anywhere;
}
.run-facts-list--issues {
display: grid;
gap: 0.4rem;
@@ -1335,10 +1380,25 @@
.guided-product-moment__resume-support .operation-block--expanded {
padding: 1rem;
min-width: 0;
box-sizing: border-box;
}
.guided-product-moment__resume-support .operation-command {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
margin: 0.65rem 0;
min-width: 0;
}
.guided-product-moment__resume-support .operation-block__status-group {
display: none;
}
.guided-product-moment__resume-support .operation-command code {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}
.guided-product-moment__output-grid {
@@ -1349,7 +1409,7 @@
.guided-product-moment__trace-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.32fr);
grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.28fr);
gap: 0.85rem;
min-height: 0;
}
@@ -1367,7 +1427,7 @@
.run-trace-frame {
display: grid;
grid-template-columns: minmax(8rem, 0.35fr) auto auto minmax(0, 1fr);
grid-template-columns: minmax(8rem, 0.26fr) auto auto minmax(0, 1fr);
gap: 0.5rem 0.75rem;
align-items: start;
}
@@ -1376,6 +1436,17 @@
grid-column: 4;
}
.guided-product-moment[data-moment="trace"] .run-facts-card[data-output-priority="summary"] {
min-width: 0;
overflow: hidden;
}
.guided-product-moment[data-moment="trace"] .run-facts-card[data-output-priority="summary"] dd,
.guided-product-moment[data-moment="trace"] .run-facts-card[data-output-priority="summary"] li,
.guided-product-moment[data-moment="trace"] .run-facts-card[data-output-priority="summary"] pre {
overflow-wrap: anywhere;
}
@container presentation-canvas (max-width: 1050px) {
.guided-product-moment__approval-grid,
.guided-product-moment__resume-grid,