Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Web profiler AJAX request div is too narrow to fit long URLs #45741

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.

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

Closed
pauljura opened this issue Mar 15, 2022 · 3 comments
Closed

Web profiler AJAX request div is too narrow to fit long URLs #45741

pauljura opened this issue Mar 15, 2022 · 3 comments

Comments

@pauljura
Copy link

Symfony version(s) affected

6.0.6

Description

Hi, this is a pretty simple request:

The div that shows AJAX requests has a max-width that is just a bit too narrow to show all information when the URL is long. I think it's just not taking into account the width of the ellipsis that gets displayed when URLs are long enough to be clipped.

Example:

image

How to reproduce

Just make some AJAX requests in your dev environment with a long URL and look in the toolbar.

Possible Solution

Make the max-width a bit larger. I find that changing from 480px to 520px is enough.

Sorry I don't know how to do a PR but I believe the relevant CSS is here:

https://github.com/symfony/web-profiler-bundle/blob/1497b1d22c2807a77563439f8ec489407a989d59/Resources/views/Profiler/toolbar.css.twig#L336

What this looks like when I edit in Chrome dev tools:

image

Additional Context

No response

@javiereguiluz
Copy link
Member

If I remember it correctly, text truncation with CSS inside table cells is sometimes complex to make it work. Maybe we're missing some CSS styles to better define the width of the table and that's why the URL column is not properly truncated to make the Time column appear entirely.

I'm not against increasing the width a bit here, but if this is only "a patch solution", next time it will fail with other URLs. That's why I think we need to find a generic solution if possible. Thanks.

@pauljura
Copy link
Author

I understand what you're saying, but long URLs are truncated, so no matter how much longer they get, the table can't get any wider.

However, if you prefer a completely future-proof solution, I would suggest removing the max-width property altogether so that the container will always be as large as the table is. Or set the max-width to something large but reasonable like 100vw, or something like that.

@tucksaun
Copy link
Contributor

I just encountered this as well on one of my projects (and unfortunately only found this issue while opening #46507)

This does not look related to the text ellipsis itself as removing it keeps the same width.
The URL table column is already limited in width so this should not increase further.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants