`content.nuxtjs.org`: Social Icons size too big (docs)

[luisoos]

Environment

Browser

Reproduction

Just get on any page at Nuxt Content Documentation and scroll down to the footer.

Describe the bug

The logos of Nuxt and Vue Telescope are too big. This not only doesn't look good, but also causes that you can't enter specific links and text is hidden.

Additional context

I think this is a problem with Docus, but because it's not open-sourced yet, I thought it might be the right option to open an Issue here, since the documentation is here as well. I am sorry if that was a wrong idea.

Logs

No response

[nobkd]

You're right, but it's only on the get-started page, that the icons cover some text.

On other pages the color of the icons is more of a problem, because they use the same color as the surround-links

without hover on icon:

with hover on icon:

[nobkd]

This is still an issue, isn't it?

[nozomuikuta]

@nobkd

I don't see the too-big logos in Get Started page. 🤔 You might want to hard-refresh the page and/or delete browser caches.

[nobkd]

Soo... I looked into it again.

It seems like Firefox on desktop handles svg sizes different than Chromium or other browsers or Firefox on mobile devices. Chromium scales them to 0 × 0 (width × height) and Firefox on desktop uses the maximal size, I suppose.

I also found out, that the class="w-5 h-5" is missing for NuxtJS and Vue Telescope social icons for the svg tag like they are defined for Twitter and GitHub social icon svg tags

Also the view boxes for the Vue Telescope and NuxtJS social icon svgs are not optimal, because they look smaller than Github and Twitter icons when sized with the same classes.