Add text-overflow:ellipsis to the beginning of file path

[slaFFik]

When the Ray app is displaying what has been sent to it it also shows the file and the line number.
Together, that string can be loooong:

C:\OpenServer\domains\am\plugins\wpforms\wp-content\plugins\wpforms\src\Pro\Admin\Entries\Export\File.php:347

The default width of the app can't fit that long string, and it shows the first part:

C:\OpenServer\domains\am\plugins\wpforms\wp-content\plugins\wpforms\src\Pro\

Because the last part is hidden behind the viewport (and there is no vertical scroll, thank goodness).

The problem is that the last part is what actually the most important - because it shows where exactly the ray() call has been triggered.

I suggest to display the last part by default, something like this:

...\plugins\wpforms\src\Pro\Admin\Entries\Export\File.php:347

And the first part will expand when the Ray window width is increased. Similar to how text-overflow: ellipsis; CSS property works, but ellipsis at the beginning of the string. It's possible to do that even with pure CSS.

The URL of that link should still be the full path, so click to open in the IDE will work the same.

[freekmurze]

I very much like this idea. Can we do this with CSS @willemvb ?

[willemvb]

Cool idea! Finally found some time to create a PR for this: https://github.com/spatie/ray-app/pull/140