Skip to content

fix(web): keep a long path from running under the folder picker button #4823

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
juliusmarminge merged 2 commits into from
Aug 15, 2026
Merged

fix(web): keep a long path from running under the folder picker button #4823

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3b87ab8
fix(web): keep a long path from running under the folder picker button
Sy-D Jul 29, 2026
ba838f7
fix(web): reserve highlighted folder action space
juliusmarminge Aug 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions apps/web/src/components/CommandPalette.logic.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { describe, expect, it, vi } from "vite-plus/test";
import { EnvironmentId, ProjectId, ProviderInstanceId, ThreadId } from "@t3tools/contracts";
import type { Thread } from "../types";
import {
browseInputEndPaddingClass,
buildBrowseGroups,
buildThreadActionItems,
enumerateCommandPaletteItems,
Expand All @@ -10,6 +11,35 @@ import {
type CommandPaletteGroup,
} from "./CommandPalette.logic";

describe("browseInputEndPaddingClass", () => {
it("reserves the widest space for the create action", () => {
expect(
browseInputEndPaddingClass({
willCreateProjectPath: true,
hasHighlightedBrowseItem: false,
}),
).toContain("pe-38");
});

it("reserves space for the wider highlighted-item shortcut", () => {
expect(
browseInputEndPaddingClass({
willCreateProjectPath: false,
hasHighlightedBrowseItem: true,
}),
).toContain("pe-30");
});

it("keeps the compact reserve for the normal add action", () => {
expect(
browseInputEndPaddingClass({
willCreateProjectPath: false,
hasHighlightedBrowseItem: false,
}),
).toContain("pe-24");
});
});

describe("reduceCommandPaletteUiState", () => {
const closedState = { open: false, mode: "command", openIntent: null } as const;

Expand Down
13 changes: 13 additions & 0 deletions apps/web/src/components/CommandPalette.logic.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,19 @@ export const RECENT_THREAD_LIMIT = 12;
export const ITEM_ICON_CLASS = "size-4 text-icon-muted";
export const ADDON_ICON_CLASS = "size-4";

export function browseInputEndPaddingClass(input: {
readonly willCreateProjectPath: boolean;
readonly hasHighlightedBrowseItem: boolean;
}): string {
if (input.willCreateProjectPath) {
return "*:data-[slot=autocomplete-input]:pe-38!";
}
if (input.hasHighlightedBrowseItem) {
return "*:data-[slot=autocomplete-input]:pe-30!";
}
return "*:data-[slot=autocomplete-input]:pe-24!";
}

/**
* The global search overlay hosts three mutually exclusive surfaces: the
* command palette (⌘K), the project file picker (⌘P), and project content
Expand Down
12 changes: 8 additions & 4 deletions apps/web/src/components/CommandPalette.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ import {
} from "../wslPaths";
import {
ADDON_ICON_CLASS,
browseInputEndPaddingClass,
buildBrowseGroups,
buildProjectActionItems,
buildRootGroups,
Expand Down Expand Up @@ -2345,13 +2346,16 @@ function OpenCommandPaletteDialog(props: {
footerTrailing={footerTrailing}
inputAccessory={inputAccessory}
inputProps={{
// The submit button is absolutely positioned over the field, so the
// inner input must reserve enough room for the full action label.
className:
addProjectCloneFlow?.step === "repository"
? "pe-32"
? "*:data-[slot=autocomplete-input]:pe-32!"
: isBrowsing
? willCreateProjectPath
? "pe-36"
: "pe-16"
? browseInputEndPaddingClass({
Comment on lines 2354 to +2355

@macroscopeapp macroscopeapp Bot Aug 15, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isBrowsing is also true during the clone-destination step (addProjectCloneFlow.step === "confirm"), where this same accessory renders the wider labels Clone, Create & Clone, and Cloning (see submitActionLabel at lines 2004-2010 and the pending swap at line 2307). The reserve keys only on willCreateProjectPath / hasHighlightedBrowseItem, so those wider labels get the reserve calibrated for Add / Create & Add and the destination path can run under the button again — the case this PR is fixing.

The move from wrapper padding to inner-input padding also loses ground here: pe-36 on the wrapper stacked with the input's own px-[calc(--spacing(3)-1px)] (~155px of clearance), while *:data-[slot=autocomplete-input]:pe-38! overrides that padding and yields 152px, so Create & Clone has slightly less room than before.

Smallest fix: feed the clone-destination state (or the rendered label) into browseInputEndPaddingClass and give it a wider bucket, so the reserve is derived from the label actually shown.

Posted via Macroscope — UI Consistency

willCreateProjectPath,
hasHighlightedBrowseItem,
})
: undefined,
placeholder: inputPlaceholder,
wrapperClassName: isSubmenu
Expand Down
Loading