From 847a57b893ac13478c20219c39c5b3d232b4ed4c Mon Sep 17 00:00:00 2001 From: whereareiam Date: Sun, 4 Oct 2026 09:37:38 +0200 Subject: [PATCH] Pull request: Align the merge box states, method menu and merge form with GitHub Every merge box state now uses one sectioned layout, so a pull request blocked by branch protection no longer pushes its text to the right or lets the merge bar overflow the box. The merge method menu drops its divider lines and oversized rows, and the expanded merge form spans the box with GitHub-sized inputs and buttons. Co-Authored-By: Claude Opus 5.5 --- styles/components/issues/pull_review.ts | 153 +++++++++++++++++------- 1 file changed, 112 insertions(+), 41 deletions(-) diff --git a/styles/components/issues/pull_review.ts b/styles/components/issues/pull_review.ts index ceb12ae..1c449ce 100644 --- a/styles/components/issues/pull_review.ts +++ b/styles/components/issues/pull_review.ts @@ -216,52 +216,51 @@ export default css` &.merge-ready > .timeline-avatar { background: ${themeVars.github.bgColor.success.emphasis}; } - /* Without the merge status block, each native row becomes one of GitHub's bordered sections. */ - & .merge-section:not(:has(.pull-merge-status)) { + /* Every state uses one layout: each row is a bordered section, as in GitHub's merge box. */ + & .merge-section { padding: 0; + border: 0; + & > .divider { + display: none; + } + & > :is(.item, details, .pull-merge-actions):not(:first-child) { + border-top: 1px solid ${themeVars.color.light.border}; + } & > .item { + display: flex; + align-items: center; + gap: 8px; min-height: 64px; + margin: 0; padding: 16px; + border-right: 0; + border-bottom: 0; + border-left: 0; } - & > .item + .divider + .item, - & > .item + .divider + details { - margin-top: 0; - border-top: 1px solid ${themeVars.color.light.border}; - } - & > .item .flex-text-inline { + /* A row's title: Forgejo writes it either beside the icon or inside .flex-text-inline. */ + & > .item:has(> svg:first-child), + & > .item > .flex-text-inline { gap: 8px; font-size: 16px; font-weight: 600; line-height: 24px; } - & > .item .flex-text-inline > svg { + & > .item > svg:first-child, + & > .item > .flex-text-inline > svg { ${mergeSectionIcon} background: ${themeVars.github.bgColor.neutral.emphasis}; } - & > details { - padding: 16px; - background: ${themeVars.color.box.header}; - border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius}; - } - } - & .merge-section { - padding: 16px; - border: 0; - & > .item { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - min-height: 32px; - border: 0; - padding: 0; + & > .item > svg.octicon-x:first-child { + background: ${themeVars.github.bgColor.danger.emphasis}; } - & > .item + .divider + .item, - & > .item + .divider + details { - margin-top: 8px; + /* A row's control sits at its right edge. */ + & > .item > .flex-text-inline { + flex: 1; + min-width: 0; } - & > .divider { - display: none; + & > .item:not(.pull-merge-status) > :is(div, .ui.button, .ui.buttons):last-child:not(:first-child) { + flex: none; + margin-left: auto; } & > .item .ui.button { ${mergeButton} @@ -269,22 +268,27 @@ export default css` margin: 0; padding-right: 12px; padding-left: 12px; + font-weight: 500; } & > .item .ui.dropdown.icon.button { width: 32px; padding: 0; justify-content: center; } + & > details { + padding: 16px; + background: ${themeVars.color.box.header}; + border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius}; + } & > details > summary { ${mergeInstructionsLink} } - & .pull-merge-status { - display: flex; + & > .item.pull-merge-status { align-items: flex-start; - justify-content: flex-start; - gap: 8px; + font-size: 14px; + font-weight: 400; + line-height: 21px; & > svg { - ${mergeSectionIcon} background: ${themeVars.github.bgColor.success.emphasis}; } & h3 { @@ -294,10 +298,12 @@ export default css` font-weight: 600; } & .pull-merge-note { + min-height: 0; padding: 0; border: 0; color: ${themeVars.color.text.light.num1}; font-size: 14px; + font-weight: 400; line-height: 21px; & > svg { display: none; @@ -310,9 +316,7 @@ export default css` flex-wrap: wrap; align-items: center; gap: 8px; - margin: 16px -16px -16px; padding: 16px; - border-top: 1px solid ${themeVars.color.light.border}; border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius}; background: ${themeVars.color.box.header}; & details { @@ -325,11 +329,78 @@ export default css` & summary { ${mergeInstructionsLink} } - & .menu .item { - border: 0; - } & .ui.button { ${mergeButton} + margin: 0; + } + /* Merging past unmet requirements: GitHub's danger button, not a filled red bar. */ + & .ui.red.buttons .ui.button { + color: ${themeVars.github.button.danger.fgColor.rest}; + background-color: ${themeVars.github.button.danger.bgColor.rest}; + border-color: ${themeVars.color.light.border}; + &:hover { + color: ${themeVars.github.button.danger.fgColor.hover}; + background-color: ${themeVars.github.button.danger.bgColor.hover}; + border-color: ${themeVars.github.button.danger.borderColor.hover}; + } + } + & .ui.buttons .ui.dropdown.icon.button { + width: 32px; + padding: 0; + justify-content: center; + } + /* The merge method menu: plain 32px rows as in GitHub's action menus. */ + & .ui.dropdown .menu { + min-width: 280px; + padding: 8px; + & > .item { + display: flex; + align-items: center; + gap: 8px; + min-height: 32px; + margin: 0 !important; + padding: 6px 8px !important; + border: 0 !important; + border-radius: ${otherThemeVars.border.radius}; + font-weight: 400; + line-height: 20px; + } + & .action-text { + flex: 1; + padding: 0; + } + & .auto-merge-small { + color: ${themeVars.color.text.light.num1}; + } + } + /* The expanded form takes the whole row: title, message, then the buttons. */ + & > #pull-request-merge-form:has(form .field) { + flex: 0 0 100%; + } + & form { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 16px 8px; + & > .field { + flex: 0 0 100%; + margin: 0; + } + & > .field > input { + height: 32px; + padding: 5px 12px; + line-height: 20px; + } + & > .field > textarea { + display: block; + min-height: 100px; + padding: 8px 12px; + line-height: 20px; + resize: vertical; + } + & > .ui.checkbox { + margin-left: 8px !important; + } } } }