Even out chat footer spacing and show the Changes base only on worktrees (#8934)

* fix(app): space the turn footer like the rest of the timeline

The footer sat 13px under the last line of text while the text sat about
21px under a tool or thinking row, so the footer looked glued to the
message. The message drops its bottom padding when a footer follows, so the
footer's top margin alone sets that gap; 20 makes the centre-to-centre
distance match the tool-to-text gap.

* fix(app): show the Changes base only on Paseo worktrees

The header rendered "branch -> base" whenever checkout status carried a
baseRef, and the daemon sends one for every git checkout, so plain
checkouts showed "-> main" with no way to change it. Only Paseo worktrees
store a base, so only they show it. The arrow is extra muted so it reads as
a separator, and the base no longer shrinks, so a long branch name truncates
instead of the base.

* fix(app): let a long Changes base truncate instead of overflowing
This commit is contained in:
Mohamed Boudra
2026-11-06 20:20:11 +07:00
committed by GitHub
parent dc51a3b6a9
commit ae157dbfb6
4 changed files with 21 additions and 14 deletions
@@ -427,6 +427,15 @@ test("Changes shows the base as text on a host without the base-branch capabilit
expect(baseRequests).toBe(0);
});
test("Changes shows no base on a checkout that is not a Paseo worktree", async ({ page }) => {
const workspace = await createWorkspaceWithCommittedDiff();
await openWorkspaceChangesSurface(page, workspace);
const header = page.getByTestId("changes-repository-header").filter({ visible: true });
await expect(header).toContainText("feature");
await expect(header).not.toContainText("main");
await expect(page.getByTestId("workspace-base-branch-trigger")).toHaveCount(0);
});
test("Changes keeps a manual comparison when checkout dirtiness changes", async ({ page }) => {
const workspace = await createWorkspaceWithMountedTabDiff();
await openWorkspaceChanges(page, workspace);
@@ -218,8 +218,12 @@ const stylesheet = StyleSheet.create((theme) => ({
alignSelf: "center",
paddingHorizontal: theme.spacing[2],
},
// The message above drops its bottom padding for the footer (compactBottom), so this margin
// alone sets the gap. 20 puts the footer as far below the text as the text sits below a
// tool row: 12 message padding + 4 stream gap + 5 badge padding/border, less the footer's
// 1px taller row.
turnFooterRow: {
marginTop: theme.spacing[2] + 5,
marginTop: theme.spacing[4] + theme.spacing[1],
},
turnFooterSlot: {
flexDirection: "row",
+2 -3
View File
@@ -667,15 +667,14 @@ function ChangesRepositoryToolbar({
isGitCheckout
testID="changes-branch-switcher"
/>
{model.baseRef ? (
{model.baseRef && model.isWorktree ? (
<>
<ThemedArrowRight size={14} uniProps={foregroundMutedIconColorMapping} />
<ThemedArrowRight size={14} uniProps={extraMutedIconColorMapping} />
<WorkspaceBaseBranchPicker
serverId={model.serverId}
workspaceId={model.workspaceId}
cwd={model.cwd}
baseRef={model.baseRef}
isWorktree={model.isWorktree}
/>
</>
) : null}
@@ -20,7 +20,6 @@ interface Props {
workspaceId?: string | null;
cwd: string;
baseRef: string;
isWorktree: boolean;
}
const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
@@ -31,13 +30,7 @@ function refLabel(ref: string): string {
return ref.replace(/^refs\/(heads|remotes)\//, "");
}
export function WorkspaceBaseBranchPicker({
serverId,
workspaceId,
cwd,
baseRef,
isWorktree,
}: Props) {
export function WorkspaceBaseBranchPicker({ serverId, workspaceId, cwd, baseRef }: Props) {
const { t } = useTranslation();
const client = useHostRuntimeClient(serverId);
const connected = useHostRuntimeIsConnected(serverId);
@@ -135,7 +128,7 @@ export function WorkspaceBaseBranchPicker({
[t, isPending, error, isError, handleRetry],
);
if (!supported || !isWorktree || !workspaceId) return <Text style={styles.text}>{label}</Text>;
if (!supported || !workspaceId) return <Text style={styles.text}>{label}</Text>;
return (
<View ref={anchorRef} collapsable={false} style={styles.anchor}>
@@ -172,7 +165,9 @@ export function WorkspaceBaseBranchPicker({
}
const styles = StyleSheet.create((theme) => ({
anchor: { flexShrink: 1, minWidth: 0 },
// The branch name truncates first so a short base like "main" stays readable; the cap lets
// a long base still truncate instead of overflowing the header.
anchor: { flexShrink: 0, minWidth: 0, maxWidth: "40%" },
footer: { padding: theme.spacing[3], gap: theme.spacing[2] },
text: { color: theme.colors.foregroundMuted, fontSize: theme.fontSize.sm },
error: { color: theme.colors.destructive, fontSize: theme.fontSize.sm },