Impossible to find css rules that make the main contain take the full width after migrating to JB2

[Alexboiboi]

Hi there,

Thanks for the nice work!

I am in the process of migrating to Jupyter-book 2. Previously I had a custom css file to have the main article container take the full width:

/* -- .bd-container and .bd-container__inner both need to adjust ---------- */
/* -- this so 'outer container' grows with browser (no L/R 'dead space') -- */
.bd-container {
    max-width: 99%;
}

/* -- this so the 'inner container' fills the outer container -------------- */
.bd-container .bd-container__inner {
    max-width: 99%;
}

/* -- .bd-article-container holds the "text in the middle" (notebook / md) ------ */
/* -- width is as high as as 100 "ems" (characters) wide, scales with font size -*/
.bd-main .bd-content .bd-article-container {
    max-width: 100em;
}

credit: https://stackoverflow.com/questions/73282631/modifying-content-width-of-jupyter-book-or-the-sphinx-theme-sphinx-book-theme

But I cannot find a way to achieve the same with JB2.

Is this even possible this way?

Thanks

[agoose77]

@Alexboiboi would you mind sharing a screenshot of the previous behaviour in JB1 so that we can guide you to the best approach for JB2?

[Alexboiboi]

Hi @agoose77,

Thanks for the response,

I cannot share a screenshot of this private repo but i have test repo deployed on gh pages where I would like to try here:

https://alexboiboi.github.io/Jupyter-Book-2-plotly-optimized-rendering/optimized/

There is a lot of "lost space" left and right and in my case I have plotly plots with long legend titles that take alsmost all the horizontal space of the article width, so that the plot data itself becomes completely invisible !

[Alexboiboi]

Hi @agoose77 ,

After some deeper digging into the juypterbook and myst-theme repo I managed to find some rules that work. Maybe not really the way it should be done but gets the main job done ;)

/* Move the sidebars to the edges and extend main content */

.article {
  grid-template-columns:
    [screen-start] 0rem
    [page-start] 0rem
    [body-start] 1fr
    [body-end] 400px
    [page-end] 0rem
    [screen-end] !important;
}

@media (max-width: 1023px) {
  .article {
    grid-template-columns:
      [screen-start] 0rem
      [page-start] 0rem
      [body-start] 1fr
      [body-end] 0rem
      [page-end] 0rem
      [screen-end] !important;
  }
}
@media (min-width: 1280px) {
  .article {
    margin-left: 400px;
  }
}

.xl\:col-margin-left {
  left: 0 !important;
  position: fixed !important;
}