docs: Horizontal alignment issue in https://angular.io/guide/what-is-angular angular

[abergquist]

Describe the problem that you experienced

Not a big issue, but thought I'd mention that there is a horizontal alignment issue in https://angular.io/guide/what-is-angular (angular / aio / content / guide / what-is-angular.md in angular:main).

The following pairs of text are not exactly horizontally aligned:

• 'ng build' and 'Compiles an Angular app into an output directory.'
• 'ng serve' and 'Builds and serves your application, rebuilding on file changes.'
• 'ng generate' and 'Generates or modifies files based on a schematic.'
• 'ng test' and 'Runs unit tests on a given project.'
• 'ng e2e' and 'Builds and serves an Angular application, then runs end-to-end tests.'

Enter the URL of the topic with the problem

https://angular.io/guide/what-is-angular

Describe what you were looking for in the documentation

That the following pairs of text are exactly horizontally aligned:

• 'ng build' and 'Compiles an Angular app into an output directory.'
• 'ng serve' and 'Builds and serves your application, rebuilding on file changes.'
• 'ng generate' and 'Generates or modifies files based on a schematic.'
• 'ng test' and 'Runs unit tests on a given project.'
• 'ng e2e' and 'Builds and serves an Angular application, then runs end-to-end tests.'
  

Describe the actions that led you to experience the problem

I went to https://angular.io/guide/what-is-angular and noticed the lack of horizontal alignment.

I'm including another screen shot from the same page because it also displays/illustrates the same lack of horizontal alignment.

Describe what you want to experience that would fix the problem

No response

Add a screenshot if that helps illustrate the problem

If this problem caused an exception or error, please paste it here

No response

If the problem is browser-specific, please specify the device, OS, browser, and version

No response

Provide any additional information here in as much as detail as you can

I had done a quick right-click and Inspect; it appears that the issue can easily be resolved if you eliminate the following line from _typography.scss:

    vertical-align: top;

What I don't know, though, is if doing that adversely affect anything else.

Having both columns be horizontally aligned along their centers would be the ideal.

[dario-piotrowicz]

Hi @abergquist I've created a PR for this I hope you don't mind 🙂

However I think that the right solution here is to use text-top instead of completely remove the vertical alignment, as your solution would change how the tables look (breaking the design).

What I mean is that this is how the tables look now:

This is how they look if we removed the vertical alignment:

(not that the vertical alignment is anyways lost when we have multiple rows)

And this is how they look with text-top:

I believe that this is the nicest way to fix your issue without breaking/changing the designs 🙂

What do you think? 🙂

[dario-piotrowicz]

by the way, also the removal of the vertical alignment can really create a big difference in other tables, for example here:

versus:

[abergquist]

Yes, dario-piotrowicz; yours is a wonderful idea. Can we go with that?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}