FIX: style table generated by myst-NB (#1041)

* FIX: style table generated by myst-NB
Fix #1038

* lint

* reorder folders

src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss

@@ -1,6 +1,7 @@
 /*********************************************
 * SASS Mixins
 *********************************************/
+
 /**
 * Scrollbars should be thinner and slightly rounded, with a grey background
 * ref: https://www.nngroup.com/articles/scrolling-and-scrollbars/
@@ -69,3 +70,14 @@
     pointer-events: none;
   }
 }
+
+/**
+ * Set background of some cell outputs to white-ish to make sure colors work
+ * This is because many libraries make output that only looks good on white
+ */
+@mixin cell-output-background {
+  color: var(--pst-color-on-background);
+  background-color: var(--pst-color-text-base);
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+}

src/pydata_sphinx_theme/assets/styles/extensions/_execution.scss

@@ -6,37 +6,12 @@
  * In the future, we might add dark theme support for specific packages.
  */
 
-// Set background of some cell outputs to white-ish to make sure colors work
-// This is because many libraries make output that only looks good on white
-@mixin cell-output-background {
-  color: var(--pst-color-on-background);
-  background-color: var(--pst-color-text-base);
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-}
+/******************************************************************************
+ * Jupyter Sphinx
+ */
 
 // Dark theme special-cases
 html[data-theme="dark"] .bd-content {
-  // MyST-NB
-  div.cell_output {
-    img,
-    .text_html {
-      @include cell-output-background;
-    }
-  }
-
-  // NBSphinx
-  .nboutput {
-    .output_area.rendered_html {
-      @include cell-output-background;
-    }
-
-    .output_area.stderr {
-      background: var(--pst-color-danger);
-    }
-  }
-
-  // Jupyter Sphinx
   div.jupyter_container {
     // Background has slightly more custom background behavior because of hard-coded color
     border: 1px solid var(--pst-color-border);
@@ -53,30 +28,3 @@ html[data-theme="dark"] .bd-content {
     }
   }
 }
-
-// NBSphinx
-// Add extra padding to the final item in an nbsphinx container
-div.nblast.container {
-  margin-bottom: 1rem;
-}
-
-// MyST-NB
-// Prevent tables from scrunching together
-.bd-content {
-  div.cell_input {
-    display: flex;
-    flex-direction: column;
-    justify-content: stretch;
-  }
-
-  div.cell_input,
-  div.output {
-    border-radius: $admonition-border-radius;
-  }
-
-  div.output {
-    table {
-      table-layout: auto;
-    }
-  }
-}

src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss

@@ -0,0 +1,76 @@
+/**
+ * Styles for various Sphinx execution libraries to display pre-executed notebooks.
+ * For now, where these define output sections, we simply revert their background
+ * to be a "light theme" background. This ensures that inputs/outputs behave similarly,
+ * because the CSS is often controlled by each package.
+ * In the future, we might add dark theme support for specific packages.
+ */
+
+/*******************************************************************************
+ * nbsphinx
+ */
+
+html div.rendered_html {
+  table {
+    table-layout: auto;
+  }
+}
+
+// Dark theme special-cases
+html[data-theme="dark"] .bd-content {
+  .nboutput {
+    .output_area.rendered_html {
+      @include cell-output-background;
+    }
+
+    .output_area.stderr {
+      background: var(--pst-color-danger);
+    }
+  }
+}
+
+// Add extra padding to the final item in an nbsphinx container
+div.nblast.container {
+  margin-bottom: 1rem;
+}
+
+/*******************************************************************************
+ * myst NB
+ */
+
+div.cell_output .output {
+  max-width: 100%;
+  overflow-x: auto;
+
+  @include scrollbar-style();
+}
+
+// Dark theme special-cases
+html[data-theme="dark"] .bd-content {
+  div.cell_output {
+    img,
+    .text_html {
+      @include cell-output-background;
+    }
+  }
+}
+
+// Prevent tables from scrunching together
+.bd-content {
+  div.cell_input {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+  }
+
+  div.cell_input,
+  div.output {
+    border-radius: $admonition-border-radius;
+  }
+
+  div.output {
+    table {
+      table-layout: auto;
+    }
+  }
+}

src/pydata_sphinx_theme/assets/styles/extensions/_pydata.scss

@@ -6,12 +6,3 @@
 .xr-wrap[hidden] {
   display: block !important;
 }
-
-/**
- * special case for table rendered via nbsphinx
- */
-html div.rendered_html {
-  table {
-    table-layout: auto;
-  }
-}

src/pydata_sphinx_theme/assets/styles/pydata-sphinx-theme.scss

@@ -68,6 +68,7 @@
 @import "./extensions/sphinx_design";
 @import "./extensions/sphinx_panels";
 @import "./extensions/togglebutton";
+@import "./extensions/notebooks";
 
 // Page-specific CSS
 @import "./pages/search";