[FIX] make masker report tables horizontally scrollable and not overlap with masker report images

[Remi-Gau]

• Closes tables in masker HTML report overlap with the masker image #4281
• Closes Tables are "unbrowsable" on narrow view ports #4301
• Extracted from [DOC] display all masker reports in the doc #4295

Changes proposed in this pull request:

• make sure tables do not overlap with the images
• add horizontal scroll bar to tables

[Remi-Gau]

@bthirion
if you want the diff to be easier to read we might want to get #4302 merged first, so line indent and formatting won't show on every diff for HTML and CSS.

[github-actions]

👋 @Remi-Gau Thanks for creating a PR!

Until this PR is ready for review, you can include the [WIP] tag in its title, or leave it as a github draft.

Please make sure it is compliant with our contributing guidelines. In particular, be sure it checks the boxes listed below.

• PR has an interpretable title.
• PR links to Github issue with mention Closes #XXXX (see our documentation on PR structure)
• Code is PEP8-compliant (see our documentation on coding style)
• Changelog or what's new entry in doc/changes/latest.rst (see our documentation on PR structure)

For new features:

• There is at least one unit test per new function / class (see our documentation on testing)
• The new feature is demoed in at least one relevant example.

For bug fixes:

• There is at least one test that would fail under the original bug conditions.

We will review it as quick as possible, feel free to ping us with questions if needed.

[bthirion]

Aside one small glitch, it is very hard to say anything on this.
Can you point to some generated outputs ?

[Remi-Gau]

Can you point to some generated outputs ?

Once #4295 is in I will ask for a full build of the doc so we can all easily check the reports.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.12%. Comparing base (abb80ff) to head (9487957).
Report is 22 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4308      +/-   ##
==========================================
+ Coverage   91.85%   92.12%   +0.27%     
==========================================
  Files         144      143       -1     
  Lines       16419    16438      +19     
  Branches     3434     3444      +10     
==========================================
+ Hits        15082    15144      +62     
+ Misses        792      749      -43     
  Partials      545      545              

Flag	Coverage Δ
macos-latest_3.10_test_plotting	91.92% <ø> (?)
macos-latest_3.11_test_plotting	91.92% <ø> (+0.06%)	⬆️
macos-latest_3.12_test_plotting	91.92% <ø> (?)
macos-latest_3.8_test_plotting	91.88% <ø> (?)
macos-latest_3.9_test_plotting	91.88% <ø> (?)
ubuntu-latest_3.10_test_plotting	91.92% <ø> (+0.06%)	⬆️
ubuntu-latest_3.11_test_plotting	91.92% <ø> (?)
ubuntu-latest_3.12_test_plotting	91.92% <ø> (?)
ubuntu-latest_3.8_test_min	68.87% <ø> (?)
ubuntu-latest_3.8_test_plot_min	91.63% <ø> (?)
ubuntu-latest_3.8_test_plotting	91.88% <ø> (?)
ubuntu-latest_3.9_test_plotting	91.88% <ø> (?)
windows-latest_3.10_test_plotting	91.89% <ø> (?)
windows-latest_3.11_test_plotting	91.89% <ø> (?)
windows-latest_3.12_test_plotting	91.89% <ø> (?)
windows-latest_3.8_test_plotting	91.85% <ø> (?)
windows-latest_3.9_test_plotting	91.86% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Remi-Gau]

For review

Before (current dev doc)

• maskers reports: https://nilearn.github.io/dev/modules/generated_reports/masker_reports_examples.html

After

• maskers reports: https://output.circle-artifacts.com/output/job/488a511a-1ccb-4dc0-a988-87f3d9b5ea09/artifacts/0/dev/modules/generated_reports/masker_reports_examples.html#nifti-masker

[Remi-Gau]

Before

After

The parameters and regions summary buttons are below the image and thus cannot overlap with it when unfolded.

Note

When the reports are embedded in the doc pages, they are too narrow for the unfolded table to ever overlap with the image.

[Remi-Gau]

Before

Tables are not horizontally scrollabe

After

First column is visible by default.

Tables are scrollable.

[bthirion]

LGTM, thx !