style: update overlay style on mobile

[PengBoUESTC]

Description

make overlay style more flexible。
px is not friendly in mobile client。

before

after

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines, especially the Pull Request Guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Update the corresponding documentation if needed.
• Ideally, include relevant tests that fail without this PR but pass with it.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[bluwy]

I'm not sure if this looks great. The stack trace paths can be long, and I think it's nicer if they're all within a single line and we can scroll it.

[PengBoUESTC]

I'm not sure if this looks great. The stack trace paths can be long, and I think it's nicer if they're all within a single line and we can scroll it.

normally, scroll-x in mobile modal is not good for developer or user , so I think that word-break is necessary

[bluwy]

I'll let others chime in about this, but I think it's harder to read if the stack traces are line-wrapped.

[sapphi-red]

I prefer a scrollbar, too. I think it's useful to have the function names lined up vertically.

[bluwy]

Leaving my approval for the new width changes, but I'll still likely others thoughts on the stack trace line wrapping (#15760 (comment)). Here's the new screenshots for easier review:

Screeenshots

[PengBoUESTC]

Leaving my approval for the new width changes, but I'll still likely others thoughts on the stack trace line wrapping (#15760 (comment)). Here's the new screenshots for easier review:

Screeenshots

ok , maybe we need more advices about that;

[chaejunlee]

I totally agree with your change, however, I believe max-width and padding still should be static.
With large width monitor system, though it is pretty rare situation, using visual viewport metric lowers the experience.

I hope you can agree with me!

[chaejunlee]

Suggested change

	max-width: 80vw;
	width: 80vw;
	max-width: 800px;

How about doing max-width: 800px; with width: 80vw;?
I believe that max-width should be a static value.
If we use max-width: 80vw;, it would expand infinitely and I believe it looks bad.

This applies to padding as well, however, I think we can use rem instead of px. What I found looked pretty good was padding: 1.5rem 2rem;

I am bringing up an extreme environment where screen width is 4000px wide, but I think you will get the point.

[visual viewport based]

[max-width: 800px w/ rem padding]

[chaejunlee]

Now that I see here, I think it would be better to have the block margin of .window to be dynamic to viewport height, i.e. margin: 10vh auto

[PengBoUESTC]

the problem is that, the overlay error info is not designed for Flexible screen, if U use big screen, the main problem maybe the font-size;

[PengBoUESTC]

the problem is that, the overlay error info is not designed for Flexible screen, if U use big screen, the main problem maybe the font-size;

[chaejunlee]

I get what you mean, but as we are introducing this change to support mobile viewport, we should consider the wider viewport as well.

If you think my opinion is unrelated to your PR, I will open another PR after this one being merged and continue the discussion! 😊