Added clean monitor table for smaller screens

[Ponkhy]

I added a different and more clean table style for smaller mobile screens.
Because on some devices it looked pretty compressed, see Example 1.
You can see the new table style in Example 2. It will only appear on a screen width smaller than 550px.

Example 1:

Example 2:

[Ponkhy]

This should be done now or are there any suggestions?

[louislam]

This should be done now or are there any suggestions?

Overall is great. The row spacing in Details.vue maybe too big?

[Ponkhy]

Alright, i'll work on that tomorrow!

[Ponkhy]

Okay, i've reduced the row spacing while not making it look too compressed.
I also centered the badge, cause the margin-top still applied on the Details page before too.

[chakflying]

Just as an experiment, how do you feel about making the pill full width and making the title bold?

[Ponkhy]

I really like the idea of making the title bolt.
I think making the badge full width looks a bit "overwhelming", so i got another idea, how about this?

[chakflying]

@Ponkhy Nice! I'm ok with that too.

[Ponkhy]

@chakflying Alright, I added the commit a17c14e and also made the title bolt.

If you have a better approach on the change feel free to correct it!

[louislam]

Dimmed the color of border line, if it is ok, I will merge to master branch.

[Ponkhy]

@louislam For the dark mode i totaly agree!
Unfortunately it looks too dark on the light mode.
Are you adjusting it for the light one or should i?

[louislam]

@louislam For the dark mode i totaly agree!
Unfortunately it looks too dark on the light mode.
Are you adjusting it for the light one or should i?

That is unexpected. I thought I added inside .dark....

[louislam]

Just recheck, it is ok in my side. Strange.

[Ponkhy]

Ohh i'm sorry it's my false, i didn't read and pull properly.
Yes we're good now, looks perfect!