Polish Extension UI

[daviddossett]

Creating this polish issue to track a number of quick wins I think I/we can tackle. Some initial ideas:

• Full pass on all webview UI from typography to alignment
• See how we can bridge the gap from GH to VS Code design languages
• Polish comments input element to feel more like other inputs in VS Code
• Explore introducing webview UI toolkit (ref Use Webview UI Toolkit for Visual Studio Code for webview controls #3035)

cc @digitarald

[digitarald]

cc @alexr00: any areas where you'd like to see design opportunities explored?

@daviddossett one aspect to pull in is how we represent actions, checks and statuses; happening in #681

[alexr00]

The only big area that I can think of is out constant game of catchup in the PR description webview: every time github.com changes we'll look out of date. So far we've tried to make the webview look similar to github.com. This has the benefit of familiarity, but maybe it's worth thinking about whether it's worth making it look more different.

[daviddossett]

That's a good point @alexr00. I think maintaining the general GH layout structure makes enough sense unless we have good reasons to change that.

As for the specific components and elements I feel like we can bias towards VS Code design language as a gut reaction.

It seems like we should also split this effort into two distinct parts:

1. UI polish (mostly CSS + perhaps swapping out components)
2. UX changes (like Show PR review status #681)

For 2, I think it makes sense to track those in the specific issues. I'll happily help with that work, but I think the main focus of this issue is to polish what's already there.

[daviddossett]

Spent some time looking at the description page today to see how we could refresh the overall visual language and fix some responsive issues. This does not yet go into the weeds of how markdown and code is rendered within the feed. Just looking for at the overall impression to start before I start some PRs.

A couple of things I'm trying to do:

• Visually align the header and metadata column (assignees, labels, etc.) with the extension detail page
• Clean up layout of header (button placement, typography, PR status tag, etc.)
• Modernize feed, checks, and metadata visual design
• Use Webview UI Toolkit components (buttons, icon buttons—especially for proper dimensions and feedback on hover/focus). It will be a stretch goal to swap over to those but I'll see what I can do.

Large Screen

Small screen + details

[digitarald]

@daviddossett good to see the extra care to check small screens. Maybe we can also check the design updates for these cases:

• Even smaller viewport: The design has a responsive breakpoint for moving the sidebar items on top of the description.
• How longer titles and lines (… wants to merge changes into …) break.

[daviddossett]

@digitarald addressed the second bullet in #4050. Will do the same for the sidebar 🙏

[daviddossett]

Closing this as finished since the bulk of this work has been done. Will track scoped polish items in their own issues going forward 👍