Draggable divider in resizable PageLayout component should be more obvious

[dylanatsmith]

We got feedback that it’s not clear the PageLayout panes can be resized, and it’s not clear where you would drag to resize. See https://github.com/github/codespaces/issues/19538

I’m proposing a simple solution like adding a grabber icon atop the divider as an affordance:

Since the divider already has good visual hover and active states, maybe the icon is hidden in those states so we don’t need to handle them.

[github-actions]

Uh oh! @dylanatsmith, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[mperrotti]

We discussed this in today's Primer patterns working session and the designers on the call liked @dylanatsmith 's proposal to add a grabber icon atop the divider as an affordance.

[francinelucca]

Won't have time to get to this in the immediate future, putting back in the queue

[Adarsha186]

Hi @dylanatsmith , I am looking for some open source projects to work on. If this is issue is still open and hasn't been resolved, I'm interested in contributing to this issue.

[francinelucca]

@Adarsha186 assigned you to the issue, let me know if you have any questions on the requirements or our contribution process!