Header icon_links show in separate rows, h3 heavy weight, 3rd column vert stretching

[dylanh724]

This was great for a while -- but it no longer works (not sure when it broke. The latest 1.1.3 has this issue in both Sphinx 7 and 8). Seems that it has to do with .article-header-buttons class that's showing on separate rows.

---

^ The order gets jumbled if I add even 1 icon_links within html_theme_options

"icon_links": [
    {
        "name": "API Docs",
        "url": (
                "https://foo.com"
        ),
        "icon": "fa-solid fa-book-open",
        "attributes": {"target": "_self"},
    },
    {
        "name": "Discord",
        "url": "https://discord.gg/foo",
        "icon": "fa-brands fa-discord",
        "attributes": {"target": "_blank"},
    },
],

Originally posted by @dylanh724 in https://github.com/executablebooks/sphinx-book-theme/issues/833#issuecomment-2497911154

[dylanh724]

I was looking back and forth to see what the heck was possibly different - here we go :) The above was in the old css, but not in new.

[dylanh724]

Yep, that was it!

I added this to my arbitrary .css and it's back!

[dylanh724]

Please keep this issue open, as I'm pretty curious how this could've happened. I even checked out an old tag -> built -> and it had these issues using the same ver. It was as an update was force-pushed in.

Additionally, I'm having other random CSS issues such as font-weight and a couple others that I suspect is due to the same source cause, but similar to this case, I can't explain really it.

[dylanh724]

Another noticeable change is this one with the 3rd-column: The vert space is larger - or rather, it even looks like the text is stretched?

If I inspect the element and snag a value, I can find it here at _toc_inpage.scss

[dylanh724]

Adding

h3 {
    font-weight: normal;
}

worked around the other issue.

[RemDelaporteMathurin]

Yep, that was it!

I added this to my arbitrary .css and it's back!

Do you mind writing here exactly what you added to your CSS styles pls?

[dylanh724]

Do you mind writing here exactly what you added to your CSS styles pls?

For the icons:

https://github.com/executablebooks/sphinx-book-theme/issues/879#issuecomment-2497991793

For the font weight:

https://github.com/executablebooks/sphinx-book-theme/issues/879#issuecomment-2498048554

I didn't get to the vertically stretched 3rd column text

[dylanh724]

Worked around the 3rd column vertical stretching, too. Here's everything combined:

/* 
SPHINX-BOOK-THEME HOTFIX (top-right icons): 
https://github.com/executablebooks/sphinx-book-theme/issues/879 
*/
.header-article__inner .header-article-items__end, .header-article__inner .header-article-items__start {
    align-items: start;
    display: flex;
    gap: .5rem;
}

/* 
SPHINX-BOOK-THEME HOTFIX (right column vertical stretching fix): 
https://github.com/executablebooks/sphinx-book-theme/issues/879 
*/
.toc-entry a.nav-link {
    padding: .125rem 0 .125rem 1rem;
}

/* 
h3 font weight fix (from extra heavy to normal):
https://github.com/executablebooks/sphinx-book-theme/issues/879 
*/
h3 {
    font-size: 125%;
    font-weight: normal;
}

[dylanh724]

I'm still mind-boggled as to how this happened when PyPi says the tagged version hasn't been updated since ~June?