Skip to content
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

Jump to bottom

Menu too thin with WCO on Mac OS #171415

Open
a-stewart opened this issue Jan 16, 2023 · 6 comments · May be fixed by #211440
Open

Menu too thin with WCO on Mac OS #171415

a-stewart opened this issue Jan 16, 2023 · 6 comments · May be fixed by #211440
Assignees
@benibenj
Labels
bug Issue identified by VS Code Team member as probable bug macos Issues with VS Code on MAC/OS X web Issues related to running VSCode in the web
Milestone
On Deck

Comments

@a-stewart
Copy link
Contributor

Hi,

When using Mac OS and Chrome, if you install vscode.dev as a PWA and use window controls overlay, the menu bar height is less than that of the window control overlay, which creates a slightly odd disjoint.

image

Looking at the tools, it seems like there is some CSS which uses the browser environment variable, but also in there are some hard coded 35px values.

image
@a-stewart a-stewart changed the title Menu too this with WCO on Mac OS Menu too thin with WCO on Mac OS Jan 16, 2023
@tomayac
Copy link

tomayac commented Feb 9, 2023 •
edited

You should use the new env(titlebar-area-*) variables so the dimensions are right on all platforms. See the screenshot below for how I have done this in the demo for the article.

image

This is the problem when hard-coding these values:

image

@sbatten sbatten added bug Issue identified by VS Code Team member as probable bug macos Issues with VS Code on MAC/OS X web Issues related to running VSCode in the web labels Feb 18, 2023
@sbatten sbatten added this to the On Deck milestone Feb 18, 2023
@joaomoreno joaomoreno assigned benibenj and unassigned sbatten Nov 5, 2023
@joaomoreno joaomoreno modified the milestones: On Deck, November 2023 Nov 5, 2023
@benibenj benibenj modified the milestones: November 2023, On Deck Nov 27, 2023
@bpasero
Copy link
Member

bpasero commented Apr 25, 2024 •
edited

This seems to look OK for me now?

image

@a-stewart can you check

@benibenj benibenj added the info-needed Issue requires more information from poster label Apr 25, 2024
@a-stewart
Copy link
Contributor Author

It still seems to be broken on insiders.vscode.dev (using Chrome).

image

Looking at the code, it still seems to be hard coded at 35px, rather than using env(titlebar-area-height, 35px) which would handle the case where the titlebar is larger.

What is interesting is that the traffic lights seem to be a bit high in your screenshot, implying that the window is trying to compress them into a thinner bar?

What browser are you using in that screenshot?

@bpasero
Copy link
Member

bpasero commented Apr 25, 2024

I was using Edge.

@bpasero bpasero removed the info-needed Issue requires more information from poster label Apr 25, 2024
@a-stewart
Copy link
Contributor Author

At a guess, the Edge titlebar is less than 35px then, which explains why the traffic lights aren't vertically centered, but the Chrome titlebar is thicker.

I have an idea for a fix which I'll test and send you a PR tomorrow.

@a-stewart a-stewart linked a pull request Apr 26, 2024 that will close this issue
Open
@a-stewart
Copy link
Contributor Author

@bpasero - I've sent a PR for this: #211440

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@benibenj benibenj

Labels
bug Issue identified by VS Code Team member as probable bug macos Issues with VS Code on MAC/OS X web Issues related to running VSCode in the web
Projects
None yet
Milestone
On Deck
Development

Successfully merging a pull request may close this issue.

Ensure titlebar is at least as tall as the bounding rect of WCO a-stewart/vscode
6 participants
@joaomoreno @tomayac @a-stewart @bpasero @sbatten @benibenj