79239779cc
Keep the Create PR preview readable by aligning commit rows to their DOM order. - Split commit-row and file-row grid templates so commit SHAs use a fixed content column. - Prevent short commit SHAs from wrapping while leaving subjects in the flexible column. - Add tests covering commit preview row ordering, empty commit hints, and file-row layout. - Add a patch changeset for the published Fusion package. Files changed: .changeset/fn-7171-pr-preview-commit-layout.md | 7 +++ .../dashboard/app/components/PrCreateModal.css | 14 +++++- .../components/__tests__/PrCreateModal.test.tsx | 55 ++++++++++++++++++++++ 3 files changed, 75 insertions(+), 1 deletion(-) Fusion-Task-Id: FN-7171 Fusion-Task-Lineage: e0fe2ac5-1087-4a54-b60e-673c7b980780 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
319 lines
6.6 KiB
CSS
319 lines
6.6 KiB
CSS
.pr-create-modal {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: min(calc(var(--space-2xl) * 20), 90vw);
|
|
height: min(80vh, calc(100dvh - var(--overlay-padding-top, 10vh) - var(--space-lg)));
|
|
min-width: min(calc(var(--space-2xl) * 15), 100vw);
|
|
min-height: calc(var(--space-2xl) * 12);
|
|
max-width: calc(100vw - var(--space-lg));
|
|
max-height: calc(100dvh - var(--overlay-padding-top, 10vh) - var(--space-lg));
|
|
resize: both;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pr-create-modal__body {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
gap: var(--space-lg);
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: var(--space-lg) var(--modal-padding);
|
|
}
|
|
|
|
.pr-create-modal__loading {
|
|
padding: var(--space-lg);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.pr-create-modal__section-loading {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-sm) 0;
|
|
}
|
|
|
|
.pr-create-modal__section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.pr-create-modal__section-title,
|
|
.pr-create-modal h4 {
|
|
margin: 0;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.pr-create-modal__preflight {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.pr-create-modal__preflight-row {
|
|
display: grid;
|
|
grid-template-columns: auto auto 1fr;
|
|
align-items: start;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-sm);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in srgb, var(--surface) 90%, transparent);
|
|
}
|
|
|
|
.pr-create-modal__preflight-row.is-ok {
|
|
box-shadow: var(--glow-success);
|
|
}
|
|
|
|
.pr-create-modal__preflight-row.is-failed {
|
|
box-shadow: var(--glow-danger);
|
|
}
|
|
|
|
.pr-create-modal__preflight-label {
|
|
margin: 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pr-create-modal__preflight-message {
|
|
margin: 0;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.pr-create-modal__title-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.pr-create-modal__preflight-remediation,
|
|
.pr-create-modal__conflict-resolution {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
padding: var(--space-md);
|
|
border: var(--btn-border-width) solid color-mix(in srgb, var(--color-warning) 35%, transparent);
|
|
background: color-mix(in srgb, var(--color-warning) 10%, transparent);
|
|
}
|
|
|
|
.pr-create-modal__conflict-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.pr-create-modal__conflict-title,
|
|
.pr-create-modal__conflict-message {
|
|
margin: 0;
|
|
}
|
|
|
|
.pr-create-modal__conflict-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pr-create-modal__conflict-message {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.pr-create-modal__label {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.pr-create-modal__inline-actions {
|
|
display: flex;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.pr-create-modal__body-input {
|
|
font-family: var(--font-mono);
|
|
min-height: calc(var(--space-2xl) * 4);
|
|
}
|
|
|
|
.pr-create-template-hint {
|
|
margin: 0;
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.pr-create-modal__grid-two {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.pr-create-modal__draft {
|
|
align-self: end;
|
|
}
|
|
|
|
.pr-create-modal__chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
min-width: 0;
|
|
}
|
|
|
|
.pr-create-modal__chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
min-width: 0;
|
|
padding: var(--space-xs) var(--space-sm);
|
|
border-radius: var(--radius-pill);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
background: color-mix(in srgb, var(--card) 88%, transparent);
|
|
}
|
|
|
|
.pr-create-modal__chip-label {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.pr-create-modal__chip--colored {
|
|
background: color-mix(in srgb, var(--pr-chip-label-color, var(--card)) 25%, transparent);
|
|
}
|
|
|
|
.pr-create-modal__chip-remove {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
width: auto;
|
|
height: auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.pr-create-modal__option-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
min-width: 0;
|
|
}
|
|
|
|
.pr-create-modal__option-item {
|
|
text-align: left;
|
|
}
|
|
|
|
.pr-create-collapsible {
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-sm);
|
|
}
|
|
|
|
.pr-create-collapsible summary {
|
|
cursor: pointer;
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pr-create-modal__preview {
|
|
margin-top: var(--space-sm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.pr-create-modal__commit-row,
|
|
.pr-create-modal__file-row {
|
|
display: grid;
|
|
gap: var(--space-sm);
|
|
align-items: center;
|
|
padding: var(--space-xs) 0;
|
|
border-bottom: var(--btn-border-width) solid color-mix(in srgb, var(--border) 70%, transparent);
|
|
}
|
|
|
|
/*
|
|
FNXC:CreatePrModal 2026-06-27-22:35:
|
|
Commit preview rows render DOM order as SHA, subject, author. The grid must mirror that order so the short SHA keeps content width, the subject owns the flexible column, and nowrap prevents overflow-wrap:anywhere from turning the SHA vertical.
|
|
*/
|
|
.pr-create-modal__commit-row {
|
|
grid-template-columns: auto 1fr auto;
|
|
}
|
|
|
|
.pr-create-modal__file-row {
|
|
grid-template-columns: 1fr auto auto;
|
|
}
|
|
|
|
.pr-create-modal__commit-row code {
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pr-create-modal__commit-row > *,
|
|
.pr-create-modal__file-row > * {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.pr-create-modal .form-error {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-sm);
|
|
background: color-mix(in srgb, var(--color-error) 10%, transparent);
|
|
}
|
|
|
|
.pr-error {
|
|
background: color-mix(in srgb, var(--color-error) 10%, transparent);
|
|
border: var(--btn-border-width) solid color-mix(in srgb, var(--color-error) 35%, transparent);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.pr-error__hint {
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.pr-error__actions {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.pr-error__retry:focus-visible,
|
|
.pr-error__dismiss:focus-visible {
|
|
box-shadow: var(--focus-ring-strong);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.pr-create-modal {
|
|
min-width: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
resize: none;
|
|
}
|
|
|
|
.pr-create-modal__body {
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.pr-create-modal__title-row,
|
|
.pr-create-modal__grid-two,
|
|
.pr-create-modal__commit-row,
|
|
.pr-create-modal__file-row,
|
|
.pr-create-modal__preflight-remediation,
|
|
.pr-create-modal__conflict-resolution {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.pr-create-modal__draft {
|
|
align-self: start;
|
|
}
|
|
|
|
.pr-create-modal__inline-actions {
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.pr-create-modal__section-loading {
|
|
width: 100%;
|
|
}
|
|
}
|