It's better, thank you.

Some more comments:

• On Safari, there is no margin at the bottom

• The path is now correct but it looks like it's not aligned/centered (Safari and Firefox)

• On my screen, the warning about the fact that this page is displayed because there is no controllers yet is not displayed. I'm wondering if we should not move it just after "Your application is now ready and you can start working on it.". And/or perhaps makes the design a bit more compact vertically.

Status: Needs Work

I'm testing this in Safari, Chrome and Firefox. I still cannot make it work with Firefox, but I'll keep trying to fix this:

@javiereguiluz @yceruto First, thanks for this new project page design, it's awesome! Concerning the alignment issues, I could solve them for all browsers quite easily using Flex (not talking about Symfony's one 😄). Is there any reason you didn't use these CSS properties? It also makes CSS code cleaner in my opinion. I would be happy to share it if you wish.

Please note that I didn't test it on IE11 (if we really need this...), but that should be doable to make it work anyway if it doesn't already.

I don't think supporting IE 11 for this page is needed. Hopefully web developers don't use it as their main browser.
We already stopped supporting for the web profiler UI IIRC (keeping IE support for the web debug toolbar, as this one gets injected in the project UI, which may have a need to support IE)

Yeah I totally agree as we are targeting developers. I will have a quick look just by curiosity.

UPDATE: removed my diff post as I was comparing to the current 4.4 branch, and not this PR branch.
UPDATE 2: the current changes in this PR works well on Firefox on my side. So I am not sure that Flex is necessary.

@michaelperrin I can't see it correctly with Firefox. Look at how different is the vertical align of the monospaced text.

Firefox:

Chrome:

The problem is that both browsers are using different fonts ... because we don't define the font family explicitly, so 'monospace' is used.

I could solve the problem by setting the font family explicitly. I used the same font stack as Bootstrap's monospace:

SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

You're right. My CSS flex solution wouldn't help for this. I checked with the Bootstrap's monospace font family and it makes the correctly aligned indeed.

@javiereguiluz Let's use the same font everywhere as done with Bootstrap. I don't see any drawback.

I've committed some changes. I share some screenshots using Firefox, which was the browser where we had some issues ... and now it looks the same as Chrome and Safari:

Desktop

Smartphone

Thank you @yceruto.

Thank you @javiereguiluz ❤️