Add back button to AI customization section screens#310881
Merged
joshspicer merged 8 commits intomainfrom Apr 17, 2026
Merged
Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Adds an in-content “Back” control to the AI Customization Management editor’s section pages so users can return to the overview/welcome screen without relying on the sidebar home button.
Changes:
- Added a new
.content-back-barwith a back button increateContent(), wired toshowWelcomePage(), and toggled viaupdateContentVisibility(). - Updated the editor content layout CSS to make
.content-innera flex column and to allocate remaining space to section containers via flex sizing.
Show a summary per file
| File | Description |
|---|---|
| src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagementEditor.ts | Creates and shows/hides the new back bar/button and hooks it up to showWelcomePage(). |
| src/vs/workbench/contrib/chat/browser/aiCustomization/media/aiCustomizationManagement.css | Adds styling for the back bar/button and switches section containers to flex sizing so the bar can sit above them. |
Copilot's findings
- Files reviewed: 2/2 changed files
- Comments generated: 1
Contributor
Screenshot ChangesBase: Changed (33)
|
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/LocalHarness/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/CliHarness/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/CliHarness/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/Sessions/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/Sessions/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/SessionsSkillsTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/SessionsSkillsTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTab/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTab/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/SkillsTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/SkillsTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/InstructionsTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/InstructionsTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/HooksTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/HooksTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpBrowseMode/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTabScrolled/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTabScrolled/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabScrolled/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabScrolled/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTabScrolled/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTabScrolled/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabNarrow/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabNarrow/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTabNarrow/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTabNarrow/Light
| Before | After |
|---|---|
 |
 |
Added (6)
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsItemEditor/Dark
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsItemEditor/Light
chat/aiCustomizations/aiCustomizationManagementEditor/McpServerDetail/Dark
chat/aiCustomizations/aiCustomizationManagementEditor/McpServerDetail/Light
chat/aiCustomizations/aiCustomizationManagementEditor/PluginDetail/Dark
chat/aiCustomizations/aiCustomizationManagementEditor/PluginDetail/Light
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The .editor-header has align-items: center and contains a multi-line title (name + filename), causing the 26px back button to drift down when centered in the taller row. Pin it to flex-start so it sits at top of the padding box, exactly where the section back arrow sits. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
TylerLeonhardt
approved these changes
Apr 17, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a "Back" button at the top of each section screen (Agents, Skills, Instructions, Prompts, Hooks, MCP Servers, Plugins, Models) in the AI Customizations editor that returns the user to the overview/home page.
This is a little redundant with the sidebar home button — trying it out to see how it feels.
Changes
aiCustomizationManagementEditor.ts— added a.content-back-barwith an arrow-left button at the top ofcontent-inner, wired toshowWelcomePage(). Hidden during welcome / editor / detail views viaupdateContentVisibility.media/aiCustomizationManagement.css— made.content-innera flex column, styled the new bar/button, and switched the four section content containers fromheight: 100%toflex: 1; min-height: 0so they share space with the bar.Note: this will change screenshots of
blocksCi: truefixtures (LocalHarness,AgentsTabNarrow,McpServersTab,McpServersTabNarrow) — expected since visible UI is added.