Minor CSS changes

[evgip]

Firefox (76.0), Google Chrome (80.0.3987.100)...
lemmy Version v0.6.57

Vertical alignment:

Indentation from the avatar:

lemmy/ui/src/components/navbar.tsx

Line 212 in fec2e95

<li className="nav-item">

+ mt-1

Which will add top indent

.mt-1, .my-1 {
    margin-top: 0.25rem !important;
}

[NicolasCARPi]

If you have to use !important in your css, you're doing something wrong ;)

[evgip]

@NicolasCARPi

!important is used in Bootstrap, this is the original code that I provided. If we add mt-1, we will enable the .mt-1, .m1 property from Bootstrap. We don’t use CSS here, we don’t add anything at all. Only mt-1 to indent. This is one of the solutions.

The meaning of the correction is to align the items in the header vertically. Other solutions may be used.

[NicolasCARPi]

Thanks @Toxu-ru for the precision.

[dessalines]

Please do this as a PR, I'm not exactly sure what you're changing.

[evgip]

The question is closed. We will get a whole chain of changes. mt-1 was added to the top menu in one item.

Accordingly, we now get that the content in the header is not aligned. With the appearance of an Avatar there, the situation will only get worse. Because its size will expand the header.

All the solutions I've suggested here are patches, it's not exactly what's needed.