Resizable SplitPageLayout can grow in size as the screen shrinks

[jdrush89]

Resizable SplitPageLayout can grow in size as the screen shrinks

[colebemis]

I dug into this behavior a bit today. It looks like what's happening is the effective "min width" of the content changes from 959px to 511px as you shrink the viewport. When that switch happens, the pane expands to fill the space. I'd love to get some design input on what the expected behavior should be here. I'm going to move this back to the inbox so we can discuss in the next maintainer sync.

[colebemis]

@jdrush89 Are there any places in the GitHub UI where this behavior is causing issues? Seeing a real-world example would help us decide on what the correct behavior should be and what the priority of this issue is.

[langermank]

@colebemis I believe that if a user resizes the pane, that size should remain the same even if the viewport changes until it hits a responsive breakpoint that would control visibility (like if it then stacks, the width would be full).

[jdrush89]

@colebemis yes, you can see it on the codeview if you expand the tree on a wide screen, then shrink the window size.
Here's a repro on https://github.com/github/github/tree/master/.devcontainer

Edit: it seems like uploading videos to issues isn't working right now, but I'll attach whenever it's fixed.

[jdrush89]

I don't know what is wrong with issues, but I still can't attach videos. Zach has one on slack if that's helpful.
https://github-grid.enterprise.slack.com/files/UM038LRNF/F05BYRDLM08/funny-tree-view-panel.mov

[jdrush89]

Finally got it
https://github.com/primer/react/assets/955442/33b7cb9b-8a7d-4914-ae11-ddd5de5de137

[colebemis]

Ah, I see. Thanks for the video @jdrush89. @langermank and I did some investigation into this issue and it's trickier than we expected to fix it. I spoke with @lesliecdubs and we both agree that this is a low priority bug since not many people resize their browser windows.

If your main concern is that the min width of the main content is too narrow at small viewports, that can be adjusted here:

react/src/PageLayout/PageLayout.tsx

Line 746 in 58b118f

'--pane-max-width-diff': '511px',

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.