diff --git a/core/App.css b/core/App.css
index 5defcff5..a3fc0d5c 100644
--- a/core/App.css
+++ b/core/App.css
@@ -1756,23 +1756,28 @@ html[data-codiff-platform='darwin'] .sidebar {
padding: 0 8px 8px 50px;
}
-.codiff-source-description-footer-row {
- align-items: stretch;
+.codiff-source-description-overview {
+ align-items: start;
display: grid;
- gap: 8px;
- grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
+ gap: 12px;
+ grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
+ min-width: 0;
+}
+
+.codiff-source-description-overview-main,
+.codiff-source-description-overview-aside {
+ min-width: 0;
}
-.codiff-source-description-footer-main,
-.codiff-source-description-footer-aside {
+.codiff-source-description-overview-aside {
display: flex;
flex-direction: column;
- min-width: 0;
+ gap: 8px;
+ padding: 8px 8px 8px 0;
}
-.codiff-source-description-footer-main > *,
-.codiff-source-description-footer-aside > * {
- flex: 1;
+.codiff-source-description-overview-aside > * {
+ min-width: 0;
}
.source-description-comment-anonymous + .codiff-source-description-footer {
@@ -1982,10 +1987,14 @@ html[data-codiff-platform='darwin'] .sidebar {
}
@media (max-width: 1024px) {
- .codiff-source-description-footer-row {
+ .codiff-source-description-overview {
grid-template-columns: minmax(0, 1fr);
}
+ .codiff-source-description-overview-aside {
+ padding: 0 8px 8px;
+ }
+
.pull-request-merge-controls,
.pull-request-merge-actions {
justify-content: flex-start;
diff --git a/core/SharedWalkthroughApp.tsx b/core/SharedWalkthroughApp.tsx
index c075084e..d2a0a018 100644
--- a/core/SharedWalkthroughApp.tsx
+++ b/core/SharedWalkthroughApp.tsx
@@ -840,20 +840,12 @@ export function ReviewSurface({
onMergePullRequest={mergePullRequest}
/>
) : undefined;
- const sourceDescriptionFooter =
- sourceDescriptionFooterMain && sourceDescriptionFooterAside ? (
-
-
{sourceDescriptionFooterMain}
-
{sourceDescriptionFooterAside}
-
- ) : (
- (sourceDescriptionFooterMain ?? sourceDescriptionFooterAside)
- );
const sourceDescription =
source.type === 'pull-request' ? (
);
};
@@ -1158,7 +1151,8 @@ export function ReviewSurface({
scrollTarget={treeScrollTarget}
selectedPath={visibleSelectedPath}
sourceDescriptionActions={sourceDescriptionActions}
- sourceDescriptionFooter={sourceDescriptionFooter}
+ sourceDescriptionFooter={sourceDescriptionFooterMain}
+ sourceDescriptionFooterAside={sourceDescriptionFooterAside}
walkthroughNotes={emptyWalkthroughNotes}
/>
)
diff --git a/core/app/components/ReviewCodeView.tsx b/core/app/components/ReviewCodeView.tsx
index 14c53cfb..0bc31b41 100644
--- a/core/app/components/ReviewCodeView.tsx
+++ b/core/app/components/ReviewCodeView.tsx
@@ -943,6 +943,7 @@ function SourceDescriptionBody({
export function PullRequestSourceDescription({
actions,
footer,
+ footerAside,
keymap,
onUpdateDescription,
onUpdateTitle,
@@ -951,6 +952,7 @@ export function PullRequestSourceDescription({
}: {
actions?: ReactNode;
footer?: ReactNode;
+ footerAside?: ReactNode;
keymap?: CodiffKeymap;
onUpdateDescription?: (body: string) => Promise | void;
onUpdateTitle?: (title: string) => Promise | void;
@@ -972,6 +974,25 @@ export function PullRequestSourceDescription({
const isCollapsed = (!sourceDescriptionHasBody && !canEditDescription) || collapsed;
const layoutKey = `source-description-panel:${source.provider ?? ''}:${source.url}:${sourceTitle}:${sourceDescription}:${source.author?.login ?? ''}:${source.author?.avatarUrl ?? ''}:${isCollapsed ? 'collapsed' : 'open'}`;
+ const sourceDescriptionContent = (
+ {}}
+ onUpdateDescription={onUpdateDescription}
+ onUploadDescriptionAsset={onUploadDescriptionAsset}
+ />
+ );
+ const overviewAside =
+ footer || footerAside ? (
+
+ ) : null;
return (
@@ -987,17 +1008,19 @@ export function PullRequestSourceDescription({
/>
{!isCollapsed ? (
-
{}}
- onUpdateDescription={onUpdateDescription}
- onUploadDescriptionAsset={onUploadDescriptionAsset}
- />
- {footer ? {footer}
: null}
+ {overviewAside ? (
+
+
+ {sourceDescriptionContent}
+
+ {overviewAside}
+
+ ) : (
+ <>
+ {sourceDescriptionContent}
+ {footer ? {footer}
: null}
+ >
+ )}
) : null}
@@ -2486,6 +2509,7 @@ export function ReviewCodeView({
source,
sourceDescriptionActions,
sourceDescriptionFooter,
+ sourceDescriptionFooterAside,
supportsReviewCommentActions,
theme = 'system',
viewed,
@@ -2546,6 +2570,7 @@ export function ReviewCodeView({
source: ReviewSource;
sourceDescriptionActions?: ReactNode;
sourceDescriptionFooter?: ReactNode;
+ sourceDescriptionFooterAside?: ReactNode;
supportsReviewCommentActions: boolean;
theme?: CodiffPreferences['theme'];
viewed: Record;
@@ -3802,20 +3827,44 @@ export function ReviewCodeView({
{!sourceDescriptionCollapsed &&
(sourceDescriptionHasContent || canEditSourceDescription) ? (
-
- {sourceDescriptionFooter ? (
-
{sourceDescriptionFooter}
- ) : null}
+ {sourceDescriptionFooter || sourceDescriptionFooterAside ? (
+
+
+
+
+
+
+ ) : (
+ <>
+
+ {sourceDescriptionFooter ? (
+
{sourceDescriptionFooter}
+ ) : null}
+ >
+ )}
) : null}
@@ -3833,6 +3882,7 @@ export function ReviewCodeView({
sourceDescriptionAriaLabel,
sourceDescriptionCollapsed,
sourceDescriptionFooter,
+ sourceDescriptionFooterAside,
sourceDescriptionHasContent,
sourceDescriptionLabel,
sourceTitle,
diff --git a/core/app/components/walkthrough/NarrativeWalkthroughView.tsx b/core/app/components/walkthrough/NarrativeWalkthroughView.tsx
index aad330e5..ac072a37 100644
--- a/core/app/components/walkthrough/NarrativeWalkthroughView.tsx
+++ b/core/app/components/walkthrough/NarrativeWalkthroughView.tsx
@@ -663,21 +663,26 @@ export function NarrativeWalkthroughView({
}
: null;
+ const arc = (
+
+ );
+
return (
-
-
+ <>
+ {arc}
+
{navigation.mode === 'commit' ? (
Chapter {navigation.index + 1}
- ) : null}
-
+ ) : null}
+
+ >
);
}
diff --git a/core/app/components/walkthrough/WalkthroughDiffSurface.tsx b/core/app/components/walkthrough/WalkthroughDiffSurface.tsx
index 29a7b32f..b0513709 100644
--- a/core/app/components/walkthrough/WalkthroughDiffSurface.tsx
+++ b/core/app/components/walkthrough/WalkthroughDiffSurface.tsx
@@ -35,6 +35,7 @@ export function WalkthroughDiffSurface({
scrollTarget,
sourceDescriptionActions,
sourceDescriptionFooter,
+ sourceDescriptionFooterAside,
}: {
allowViewedToggle?: boolean;
blocks: ReadonlyArray;
@@ -44,6 +45,7 @@ export function WalkthroughDiffSurface({
scrollTarget: WalkthroughBlockScrollTarget | null;
sourceDescriptionActions?: ReviewCodeViewProps['sourceDescriptionActions'];
sourceDescriptionFooter?: ReviewCodeViewProps['sourceDescriptionFooter'];
+ sourceDescriptionFooterAside?: ReviewCodeViewProps['sourceDescriptionFooterAside'];
}) {
return (
@@ -62,6 +64,9 @@ export function WalkthroughDiffSurface({
showSourceDescription
sourceDescriptionActions={sourceDescriptionActions ?? reviewProps.sourceDescriptionActions}
sourceDescriptionFooter={sourceDescriptionFooter ?? reviewProps.sourceDescriptionFooter}
+ sourceDescriptionFooterAside={
+ sourceDescriptionFooterAside ?? reviewProps.sourceDescriptionFooterAside
+ }
walkthroughNotes={emptyWalkthroughNotes}
/>