DOC: CSS in new doc theme truncates Series table rows.

[muraii]

Location of the documentation

https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.Series.html

Documentation problem

System:

Windows 10         10.0.18363 Build 18363
Firefox            78.9esr (64-bit)
Chrome             89.0.4389.128 (Official Build) (64-bit)
MS Edge            89.0.774.75 (Official build) (64-bit)
Resolution:        1920x1080

The main element on the page referenced renders too narrowly. This truncates longer entries.

Suggested fix for documentation

The definition for the main element is as follows:

<main class="col-12 col-md-9 col-xl-7 py-md-5 pl-md-5 pr-md-4 bd-content" role="main">

Adjusting the flex breakpoint col-xl to use eight columns provides enough space for the content.

<main class="col-12 col-md-9 col-xl-8 py-md-5 pl-md-5 pr-md-4 bd-content" role="main">

It might be that an overflow declaration would work, but this seems straightforward and there seems to be room on the right of the page. Of course I don't know how this change would cascade.

[mzeitlin11]

Thanks for looking into this @muraii, would you be interested in putting up a pr?

[muraii]

@mzeitlin11 100%, will do.

[muraii]

@mzeitlin11 Tracking this down to the pydata_sphinx_theme, and specifically to layout.html, it looks like the Bootstrap class is set fine but the page is passed a sidebars dictionary and that's where I'm a bit confused. The template logic on line 83 sets the column classes at issue to col-md-12 col-xl-8 if sidebars is empty, and col-md-9 col-xl-7 otherwise.

While changing the latter set to col-md-9 col-xl-8 would make https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.Series.html render better, for https://pandas.pydata.org/pandas-docs/stable/reference/series.html it would wreck the layout. This is because both pages have sidebars set to ['search-field.html', 'sidebar-nav-bs.html', 'sidebar-ethical-ads.html'], which is the default for the theme, so both pages get the col-md-9 col-xl-7 classes. Changing to col-xl-8 pushes the TOC sidebar below the page content.

I'm not quite CSS savvy enough to know the best way forward. Part of the issue is that the table element that contains the method list is constrained by the column classes, but the colgroup element it contains is not. The former has a width of about 719px (Firefox at 1080P) while the latter has a width of 786px. The table's overflow is set to auto which makes the method list scroll horizontally.

Not sure how to proceed.