Improve quality and export usability layout
This commit is contained in:
@@ -2831,6 +2831,338 @@ button.entity-card {
|
||||
}
|
||||
}
|
||||
|
||||
/* Sprint 115 QA/Exports usability pass: calmer evidence review and handoff artifact surfaces. */
|
||||
.workspace-grid-analysis,
|
||||
.workspace-grid-exports {
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.workspace-grid-analysis {
|
||||
grid-template-columns: minmax(19rem, 0.82fr) minmax(26rem, 1.18fr);
|
||||
}
|
||||
|
||||
.workspace-grid-exports {
|
||||
grid-template-columns: minmax(28rem, 1.15fr) minmax(20rem, 0.85fr);
|
||||
}
|
||||
|
||||
.quality-results-shell,
|
||||
.export-center-shell {
|
||||
gap: 0.62rem;
|
||||
}
|
||||
|
||||
.quality-summary-surface,
|
||||
.quality-evidence-surface,
|
||||
.quality-drilldown-surface,
|
||||
.quality-control-surface,
|
||||
.quality-history-surface,
|
||||
.export-summary-surface,
|
||||
.export-handoff-surface,
|
||||
.latest-artifact-surface,
|
||||
.export-actions-surface,
|
||||
.export-history-surface {
|
||||
border-radius: 6px;
|
||||
padding: 0.62rem;
|
||||
background: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.quality-summary-surface,
|
||||
.export-summary-surface {
|
||||
background: #f8fbf9;
|
||||
}
|
||||
|
||||
.quality-results-shell .quality-summary-grid,
|
||||
.export-center-shell .quality-summary-grid {
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-summary-grid > div,
|
||||
.quality-handoff-grid > div,
|
||||
.quality-drilldown-grid > div,
|
||||
.quality-evidence-token-grid > div,
|
||||
.quality-feature-evidence-grid > div,
|
||||
.quality-provenance-grid > div,
|
||||
.handoff-readiness-grid > div,
|
||||
.latest-artifact-card,
|
||||
.handoff-action-card,
|
||||
.export-card,
|
||||
.quality-check-card {
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.56rem;
|
||||
background: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.quality-results-shell .quality-handoff-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-summary-grid span,
|
||||
.quality-handoff-grid span,
|
||||
.quality-drilldown-grid span,
|
||||
.quality-evidence-token-grid span,
|
||||
.quality-feature-evidence-grid span,
|
||||
.quality-provenance-grid span,
|
||||
.quality-score-row span,
|
||||
.latest-export-card span,
|
||||
.metric-list span,
|
||||
.handoff-readiness-grid span,
|
||||
.handoff-action-card span,
|
||||
.latest-artifact-card span {
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.055em;
|
||||
}
|
||||
|
||||
.quality-summary-grid strong,
|
||||
.quality-handoff-grid strong,
|
||||
.quality-drilldown-grid strong,
|
||||
.quality-evidence-token-grid strong,
|
||||
.handoff-readiness-grid strong,
|
||||
.handoff-action-card strong,
|
||||
.latest-artifact-card strong {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.quality-dataset-name,
|
||||
.quality-drilldown-grid p,
|
||||
.quality-evidence-token-grid p,
|
||||
.quality-feature-evidence-grid p,
|
||||
.handoff-action-card p,
|
||||
.latest-artifact-card p,
|
||||
.latest-artifact-card small,
|
||||
.export-card p {
|
||||
font-size: 0.74rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.quality-drilldown-surface .panel-title-row {
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.quality-drilldown-surface .panel-title-row .muted {
|
||||
margin: 0.18rem 0 0;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.quality-drilldown-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-evidence-token-grid {
|
||||
grid-template-columns: minmax(9rem, 0.75fr) minmax(9rem, 0.75fr) minmax(14rem, 1.5fr);
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-feature-evidence-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-feature-evidence-grid ul {
|
||||
max-height: 6.5rem;
|
||||
overflow: auto;
|
||||
padding-left: 0.95rem;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.quality-provenance-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-provenance-pre {
|
||||
max-height: 7.5rem;
|
||||
border-radius: 5px;
|
||||
padding: 0.48rem;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.quality-history-controls,
|
||||
.export-history-controls {
|
||||
margin-top: 0;
|
||||
border-radius: 6px;
|
||||
padding: 0.52rem;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.quality-history-controls input,
|
||||
.quality-history-controls select,
|
||||
.export-history-controls input,
|
||||
.export-history-controls select {
|
||||
min-height: 2.1rem;
|
||||
}
|
||||
|
||||
.quality-check-list,
|
||||
.export-list {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.quality-check-header,
|
||||
.export-card-header {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.quality-check-actions {
|
||||
gap: 0.38rem;
|
||||
justify-content: flex-start;
|
||||
margin-top: 0.45rem;
|
||||
}
|
||||
|
||||
.quality-check-actions button,
|
||||
.export-card .button-row button,
|
||||
.latest-artifact-actions button,
|
||||
.handoff-action-card button {
|
||||
min-height: 2.05rem;
|
||||
padding: 0.34rem 0.5rem;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.quality-score-row {
|
||||
grid-template-columns: 5rem 4.5rem minmax(0, 1fr);
|
||||
gap: 0.42rem;
|
||||
margin-top: 0.52rem;
|
||||
}
|
||||
|
||||
.quality-score-row > div,
|
||||
.quality-metric-card,
|
||||
.metric-list li {
|
||||
border-radius: 5px;
|
||||
padding: 0.42rem 0.48rem;
|
||||
}
|
||||
|
||||
.quality-metric-grid {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 0.36rem;
|
||||
}
|
||||
|
||||
.quality-metric-card span {
|
||||
font-size: 0.58rem;
|
||||
}
|
||||
|
||||
.quality-metric-card strong {
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.metric-list {
|
||||
grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
|
||||
gap: 0.38rem;
|
||||
margin-top: 0.48rem;
|
||||
}
|
||||
|
||||
.metric-list-label {
|
||||
margin-top: 0.55rem;
|
||||
}
|
||||
|
||||
.export-center-shell .quality-summary-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.export-handoff-surface .handoff-summary-card {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.handoff-readiness-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.latest-artifact-grid {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.latest-artifact-card {
|
||||
gap: 0.24rem;
|
||||
}
|
||||
|
||||
.latest-artifact-actions {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.export-action-grid {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.handoff-action-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.48rem;
|
||||
}
|
||||
|
||||
.handoff-action-card {
|
||||
gap: 0.24rem;
|
||||
}
|
||||
|
||||
.handoff-action-card p {
|
||||
min-height: 2.1rem;
|
||||
}
|
||||
|
||||
.export-state-stack {
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.export-card p {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.export-card .button-row {
|
||||
gap: 0.38rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.export-type-badge {
|
||||
padding: 0.12rem 0.42rem;
|
||||
font-size: 0.64rem;
|
||||
}
|
||||
|
||||
.list-limit-banner {
|
||||
margin-top: 0;
|
||||
border-radius: 6px;
|
||||
padding: 0.48rem 0.56rem;
|
||||
}
|
||||
|
||||
.list-limit-banner span {
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.workspace-grid-analysis,
|
||||
.workspace-grid-exports,
|
||||
.quality-drilldown-grid,
|
||||
.quality-evidence-token-grid,
|
||||
.quality-feature-evidence-grid,
|
||||
.quality-provenance-grid,
|
||||
.latest-artifact-grid,
|
||||
.handoff-action-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quality-metric-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.quality-results-shell .quality-summary-grid,
|
||||
.quality-results-shell .quality-handoff-grid,
|
||||
.export-center-shell .quality-summary-grid,
|
||||
.handoff-readiness-grid,
|
||||
.quality-score-row,
|
||||
.quality-metric-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quality-drilldown-surface .panel-title-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-extract-surface {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
|
||||
Reference in New Issue
Block a user