Layout changed with Sphinx 7.2.6

[dbitouze]

The PyData Sphinx Theme 0.14.0:

• with Sphinx 7.1.2, used to give the expected layout:

• with Sphinx 7.2.6, gives the following unexpected layout:

It would be nice to have the same layout with Sphinx 7.2.6 as with Sphinx 7.1.2.

[12rambau]

the first image of your comment is using pydata-sphinx-theme 0.13.x and the secode one 0.14.0. I think it's completely unrelated to Sphinx version.

Could you check again and let us know ?

[dbitouze]

Indeed, you're right. The first and second images are using, respectively:

• Sphinx 7.1.2 and PyData Sphinx Theme 0.13.3,
• Sphinx 7.2.6 and PyData Sphinx Theme 0.14.0.

Such radical changes in the layout between PyData Sphinx Theme 0.13.3 and 0.14.0 are, well, surprising...

[12rambau]

Only 2 changes a modifying what you see:

• the search button that has been replace by a search field. You can still reroll it by customizing the navbar-end the widget is still available. The lack of room make your title go on 2 lines.
• the alignment between the titles and your logo. This one look like an unexpected consequence of the 2 lines. I want to investigate it.

In general, I would suggest to reduce your title names by using aliases in you toctree. It will be easier to read and avoid this kind of behaviors. I updated all my sites this WE and transitions were very smooth. Always remember that your navbar will be displayed to user with smaller screen than yours so in your case anything smaller than a laptop was already an issue.

[dbitouze]

Only 2 changes a modifying

Isn't the background color of the announcement banner changed as well?

what you see:

* the search button that has been replace by a search field. You can still reroll it by customizing the navbar-end the [widget](https://github.com/pydata/pydata-sphinx-theme/blob/main/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button.html) is still available.

Thanks but I don't see any navbar-end in the linked page. I hoped Configure the search field position could help me but:

• it adds (not moves) a(nother, more intrusive) search field. An not that bad solution for me would be to move the current search field in the top navbar

The lack of room make your title go on 2 lines.

Indeed. Too bad: it used to work nicely with 0.13.3.

* the alignment between the titles and your logo.

Do you mean the large horizontal space between the logo and the titles?

This one look like an unexpected consequence of the 2 lines. I want to investigate it.

Thanks!

In general, I would suggest to reduce your title names by using aliases in you toctree. It will be easier to read and avoid this kind of behaviors.

Some of them are not that long, but anyway on 2 lines, e.g. „Cette FAQ“. AFAICS, the problem comes from the large horizontal space between the logo and the titles.

[12rambau]

Isn't the background color of the announcement banner changed as well?

Of course that was the main purpose of the new version. New maintainers have given have done a tremendous work on accessibility, the new color scheme is part of it. The warning banner can be deactivated if needed, it was a request from big projects like bokeh, numpy, pandas etc...

Thanks but I don't see any navbar-end in the linked page.

it's related to #1410 but in short you could use:

{
    ...
    "navbar_persistent": ["search-button"]
}

It should work

[dbitouze]

Of course that was the main purpose of the new version. New maintainers have given have done a tremendous work on accessibility, the new color scheme is part of it.

Ah, sorry, I wasn't aware: many thanks for the hard work!

The warning banner can be deactivated if needed, it was a request from big projects like bokeh, numpy, pandas etc...

But I (currently) needed it! 😉 And it was possible to deactivate it, just by not making use of:

html_theme_options = {
    ...,
    "announcement": "...",
    ...,
}

isn't it?

Thanks but I don't see any navbar-end in the linked page.

it's related to #1410 but in short you could use:

{
    ...
    "navbar_persistent": ["search-button"]
}

It should work

Indeed, thanks.

The site is still suffering from the 2-lines titles. But I guess, it will be fixed when the large horizontal space between the logo and the titles will be removed.

[dbitouze]

About the large horizontal space between the logo and the titles, the difference between the two versions seems to be:

• 0.13.3:

<div class="navbar-header-items__start">
  <div class="navbar-item">
    <a class="navbar-brand logo" href="../index.html">
      <img ...>

• 0.14:

<div class="col-lg-3 navbar-header-items__start">    
  <div class="navbar-item">
    <a class="navbar-brand logo" href="../index.html">
      <img ...>
...

(note the extra col-lg-3 class in 0.14).

[12rambau]

ok now I remember, we placed the navbar-nav in the middle so it remains alined with articles at all times. Your configuration is unusual in our community. The more classic config is very small titles that open vast list in the primary sidebar. The problem then is that if no version switcher was set, the nav list was ending completely off to the left on big screens. This solved it for example here:

So I think we won't change it back from our side.

That being said, nothing is preventing you to add a small css patch for you documentation. If you share the latest build url I can search with you the correct set of css parameters to tune.

[dbitouze]

ok now I remember, we placed the navbar-nav in the middle so it remains alined with articles at all times. Your configuration is unusual in our community. The more classic config is very small titles

But mine are not much longer than the ones on PyData Sphinx Theme site, e.g. „Domaines spécialisés“ vs „Contributor Guide“.

that open vast list in the primary sidebar.

Isn't it the case on our site as well?

The problem then is that if no version switcher was set, the nav list was ending completely off to the left on big screens. This solved it for example here:

Solution: version switcher, not at the right, but at the left of the nav list 😉.

So I think we won't change it back from our side.

That being said, nothing is preventing you to add a small css patch for you documentation. If you share the latest build url I can search with you the correct set of css parameters to tune.

Thanks! I'll let you know when I could provide it.

[dbitouze]

That being said, nothing is preventing you to add a small css patch for you documentation. If you share the latest build url I can search with you the correct set of css parameters to tune.

One page of our latest build is e.g. this one. Thanks again for your help!

[drammock]

Even if I remove the col-lg-3 the text still wraps.

Your section titles are simply too long to fit all on one line. I suggest using the "More" menu: https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/header-links.html#navigation-bar-dropdown-links

[12rambau]

could you try to remove the class as suggested by @drammock and use the "search-button" widget instead of the default "search-button-field" ?

[dbitouze]

Even if I remove the col-lg-3 the text still wraps.

Indeed , that's what I observed as well.

Your section titles are simply too long to fit all on one line. I suggest using the "More" menu: https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/header-links.html#navigation-bar-dropdown-links

But all these titles are equally “interesting” so I'd like to keep all of them immediately visible, just as it was the case with v. 0.13.3.

[12rambau]

have you tried what I suggested ?
also if you really want to keep them you can also reduce their names using aliases and keep the real title in the page.
e.g. "composition de documents" can be reduced into "composition" in a header navbar.

[dbitouze]

could you try to remove the class as suggested by @drammock

If you mean removing it with the Web development tools of e.g. Firefox, yes. And, combined with "navbar_persistent": ["search-button"], it now results in:

which is much much better, thanks to both of you. Now:

1. I don't know how to permanently remove the col-lg-3 class,
2. as shown in the previous image, the search button icon is vertically misaligned with the other icons.

[12rambau]

please open a new issue for misalignement of the search button (as it's not the preferred icon anymore).
to permanently remove the class, can you try to add "theme_navbar_align": "left" to your html_theme_options ?

[dbitouze]

please open a new issue for misalignement of the search button (as it's not the preferred icon anymore).

OK, I'll do it.

to permanently remove the class, can you try to add "theme_navbar_align": "left" to your html_theme_options ?

It doesn't work.

[dbitouze]

to permanently remove the class, can you try to add "theme_navbar_align": "left" to your html_theme_options ?

It doesn't work.

Ah, it does work with "navbar_align": "left".

Thanks!

[12rambau]

sorry we still have this one pending if you wanna help: #1391

[dbitouze]

sorry we still have this one pending if you wanna help: #1391

I'll try to have a look but I guess I'm much less expert in PyData Theme (documentation) than you are 😉

[Gouvernathor]

@12rambau

New maintainers have given have done a tremendous work on accessibility, the new color scheme is part of it.

Is the background color change from very dark grey to dark bluish a part of those accessibility changes ? If so, can you point me towards the issue where it was discussed and decided ? I searched some but I didn't find where the dark background was mentioned.
I think the former one was much better and I don't understand how decreasing contrast between font and background increases accessibility.

Found it, #1174.