From 4dc1f62b1b03cb82674cb23341120f9915214d05 Mon Sep 17 00:00:00 2001
From: Daniel McCloy <dan@mccloy.info>
Date: Tue, 13 Aug 2024 14:16:38 -0500
Subject: [PATCH 1/8] make it look good in website docs

---
 doc/_static/style.css                         |  24 ++-
 .../repr/_acquisition.html.jinja              |  34 ++--
 mne/html_templates/repr/_channels.html.jinja  |  22 +--
 mne/html_templates/repr/_filters.html.jinja   |  20 +--
 mne/html_templates/repr/_general.html.jinja   |  24 +--
 mne/html_templates/repr/epochs.html.jinja     |   2 +-
 mne/html_templates/repr/evoked.html.jinja     |   2 +-
 mne/html_templates/repr/forward.html.jinja    |   6 +-
 mne/html_templates/repr/ica.html.jinja        |   2 +-
 mne/html_templates/repr/info.html.jinja       |   2 +-
 .../repr/inverse_operator.html.jinja          |   2 +-
 mne/html_templates/repr/raw.html.jinja        |   2 +-
 mne/html_templates/repr/spectrum.html.jinja   |   2 +-
 .../repr/static/_toggle.html.jinja            |   8 +
 mne/html_templates/repr/static/repr.css       | 152 ++++++------------
 mne/html_templates/repr/static/repr.js        |  46 ++----
 mne/html_templates/repr/tfr.html.jinja        |   2 +-
 17 files changed, 133 insertions(+), 219 deletions(-)
 create mode 100644 mne/html_templates/repr/static/_toggle.html.jinja

diff --git a/doc/_static/style.css b/doc/_static/style.css
index 4bc6e03708e..caf054684ea 100644
--- a/doc/_static/style.css
+++ b/doc/_static/style.css
@@ -161,17 +161,25 @@ iframe.sg_report {
     top: 0;
 }
 
-/* TODO: Either pydata-sphinx-theme (for using Bootstrap) or sphinx-gallery (for adding table formatting) should fix this */
-.table-striped-columns>:not(caption)>tr>:nth-child(2n),.table-striped>tbody>tr:nth-of-type(odd)>* {
-    --bs-table-accent-bg: var(--bs-table-striped-bg);
+/* ******************************************************** HTML repr tables */
+
+/* make table responsive to pydata-sphinx-theme's light/dark mode */
+.table > :not(caption) > * > * {
     color: var(--pst-color-text-base);
 }
-.table-hover>tbody>tr:hover>* {
-    --bs-table-accent-bg: var(--bs-table-hover-bg);
-    color: var(--pst-color-text-base);
+.mne-repr-table tbody tr:hover {
+    background-color: var(--pst-color-table-row-hover-bg);
 }
-.rendered_html table {
-    color: var(--pst-color-text-base);
+.mne-repr-section-toggle > button > svg > path {
+    fill: var(--pst-color-text-base);
+}
+/*
+make section header rows more distinct (and harmonize with pydata-sphinx-theme table
+style in the process). Color copied from pydata-sphinx-theme; 2px copied from bootstrap.
+*/
+.mne-repr-table th {
+    padding-top: 1rem;
+    border-bottom: 2px solid var(--pst-color-primary);
 }
 
 
diff --git a/mne/html_templates/repr/_acquisition.html.jinja b/mne/html_templates/repr/_acquisition.html.jinja
index c688107b0d1..16193d75ac3 100644
--- a/mne/html_templates/repr/_acquisition.html.jinja
+++ b/mne/html_templates/repr/_acquisition.html.jinja
@@ -3,33 +3,25 @@
 
 {# Collapse content during documentation build. #}
 {% if collapsed %}
-{% set collapsed_row_class = "repr-element-faded repr-element-collapsed" %}
+{% set collapsed_row_class = "mne-repr-collapsed" %}
 {% else %}
 {% set collapsed_row_class = "" %}
 {% endif %}
 
-<tr class="repr-section-header {{ section_class_name }}" {% if collapsed %} title="Show section" {% else %}
+<tr class="mne-repr-section-header {{ section_class_name }}" {% if collapsed %} title="Show section" {% else %}
     title="Hide section" {% endif %} onclick="toggleVisibility('{{ section_class_name }}')">
-    <th class="repr-section-toggle-col">
-        <button>
-            {# This span is for the background SVG icon #}
-            <span class="collapse-uncollapse-caret"></span>
-        </button>
-    </th>
-    <th colspan="2">
-        <strong>{{ section }}</strong>
-    </th>
+    {%include 'static/_toggle.html.jinja' %}
 </tr>
 {% if duration %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Duration</td>
     <td>{{ duration }} (HH:MM:SS)</td>
 </tr>
 {% endif %}
 {% if inst is defined and inst | has_attr("kind") and inst | has_attr("nave") %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Aggregation</td>
     {% if inst.kind == "average" %}
     <td>average of {{ inst.nave }} epochs</td>
@@ -42,21 +34,21 @@
 {% endif %}
 {% if inst is defined and inst | has_attr("comment") %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Condition</td>
     <td>{{inst.comment}}</td>
 </tr>
 {% endif %}
 {% if inst is defined and inst | has_attr("events") %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Total number of events</td>
     <td>{{ inst.events | length }}</td>
 </tr>
 {% endif %}
 {% if event_counts is defined %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Events counts</td>
     {% if events is not none %}
     <td>
@@ -72,35 +64,35 @@
 {% endif %}
 {% if inst is defined and inst | has_attr("tmin") and inst | has_attr("tmax") %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Time range</td>
     <td>{{ inst | format_time_range }}</td>
 </tr>
 {% endif %}
 {% if inst is defined and inst | has_attr("baseline") %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Baseline</td>
     <td>{{ inst | format_baseline }}</td>
 </tr>
 {% endif %}
 {% if info["sfreq"] is defined and info["sfreq"] is not none %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Sampling frequency</td>
     <td>{{ "%0.2f" | format(info["sfreq"]) }} Hz</td>
 </tr>
 {% endif %}
 {% if inst is defined and inst.times is defined %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Time points</td>
     <td>{{ inst.times | length | format_number }}</td>
 </tr>
 {% endif %}
 {% if inst is defined and inst | has_attr("metadata") %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Metadata</td>
     <td>{{ inst | format_metadata }}</td>
 </tr>
diff --git a/mne/html_templates/repr/_channels.html.jinja b/mne/html_templates/repr/_channels.html.jinja
index d6ccb09312d..63ddc1f8829 100644
--- a/mne/html_templates/repr/_channels.html.jinja
+++ b/mne/html_templates/repr/_channels.html.jinja
@@ -3,36 +3,28 @@
 
 {# Collapse content during documentation build. #}
 {% if collapsed %}
-{% set collapsed_row_class = "repr-element-faded repr-element-collapsed" %}
+{% set collapsed_row_class = "mne-repr-collapsed" %}
 {% else %}
 {% set collapsed_row_class = "" %}
 {% endif %}
 
-<tr class="repr-section-header {{ section_class_name }}" {% if collapsed %} title="Show section" {% else %} title="Hide section" {% endif %}
+<tr class="mne-repr-section-header {{ section_class_name }}" {% if collapsed %} title="Show section" {% else %} title="Hide section" {% endif %}
     onclick="toggleVisibility('{{ section_class_name }}')">
-    <th class="repr-section-toggle-col">
-        <button>
-            {# This span is for the background SVG icon #}
-            <span class="collapse-uncollapse-caret"></span>
-        </button>
-    </th>
-    <th colspan="2">
-        <strong>{{ section }}</strong>
-    </th>
+    {%include 'static/_toggle.html.jinja' %}
 </tr>
 {% for channel_type, channels in (info | format_channels).items() %}
 {% set channel_names_good = channels["good"] | map(attribute='name_html') | join(', ') %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>{{ channel_type }}</td>
     <td>
-        <button class="channel-names-btn" onclick="alert('Good {{ channel_type}}:\n\n{{ channel_names_good | safe }}')" title="(Click to open in popup)&#13;&#13;{{ channel_names_good | safe }}">
+        <button class="mne-ch-names-btn sd-sphinx-override sd-btn sd-btn-info sd-text-wrap sd-shadow-sm" onclick="alert('Good {{ channel_type}}:\n\n{{ channel_names_good | safe }}')" title="(Click to open in popup)&#13;&#13;{{ channel_names_good | safe }}">
             {{ channels["good"] | length}}
         </button>
 
         {% if channels["bad"] %}
         {% set channel_names_bad = channels["bad"] | map(attribute='name_html') | join(', ') %}
-        and <button class="channel-names-btn" onclick="alert('Bad {{ channel_type}}:\n\n{{ channel_names_bad | safe }}')" title="(Click to open in popup)&#13;&#13;{{ channel_names_bad | safe }}">
+        and <button class="mne-ch-names-btn sd-sphinx-override sd-btn sd-btn-info sd-text-wrap sd-shadow-sm" onclick="alert('Bad {{ channel_type}}:\n\n{{ channel_names_bad | safe }}')" title="(Click to open in popup)&#13;&#13;{{ channel_names_bad | safe }}">
             {{ channels["bad"] | length}} bad
         </button>
         {% endif %}
@@ -41,7 +33,7 @@
 {% endfor %}
 
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Head & sensor digitization</td>
     {% if info["dig"] is not none %}
     <td>{{ info["dig"] | length }} points</td>
diff --git a/mne/html_templates/repr/_filters.html.jinja b/mne/html_templates/repr/_filters.html.jinja
index b01841cf137..384ec31bda0 100644
--- a/mne/html_templates/repr/_filters.html.jinja
+++ b/mne/html_templates/repr/_filters.html.jinja
@@ -3,40 +3,32 @@
 
 {# Collapse content during documentation build. #}
 {% if collapsed %}
-{% set collapsed_row_class = "repr-element-faded repr-element-collapsed" %}
+{% set collapsed_row_class = "mne-repr-collapsed" %}
 {% else %}
 {% set collapsed_row_class = "" %}
 {% endif %}
 
-<tr class="repr-section-header {{ section_class_name }}" {% if collapsed %} title="Show section" {% else %} title="Hide section" {% endif %}
+<tr class="mne-repr-section-header {{ section_class_name }}" {% if collapsed %} title="Show section" {% else %} title="Hide section" {% endif %}
     onclick="toggleVisibility('{{ section_class_name }}')">
-    <th class="repr-section-toggle-col">
-        <button>
-            {# This span is for the background SVG icon #}
-            <span class="collapse-uncollapse-caret"></span>
-        </button>
-    </th>
-    <th colspan="2">
-        <strong>{{ section }}</strong>
-    </th>
+    {%include 'static/_toggle.html.jinja' %}
 </tr>
 {% if info["highpass"] is defined and info["highpass"] is not none %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Highpass</td>
     <td>{{ "%0.2f" | format(info["highpass"]) }} Hz</td>
 </tr>
 {% endif %}
 {% if info["lowpass"] is defined and info["lowpass"] is not none %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Lowpass</td>
     <td>{{ "%0.2f" | format(info["lowpass"]) }} Hz</td>
 </tr>
 {% endif %}
 {% if info.projs is defined and info.projs %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Projections</td>
     <td>
         {% for p in (info | format_projs) %}
diff --git a/mne/html_templates/repr/_general.html.jinja b/mne/html_templates/repr/_general.html.jinja
index c9ad8310e64..4b56619e3d2 100644
--- a/mne/html_templates/repr/_general.html.jinja
+++ b/mne/html_templates/repr/_general.html.jinja
@@ -3,26 +3,18 @@
 
 {# Collapse content during documentation build. #}
 {% if collapsed %}
-{% set collapsed_row_class = "repr-element-faded repr-element-collapsed" %}
+{% set collapsed_row_class = "mne-repr-collapsed" %}
 {% else %}
 {% set collapsed_row_class = "" %}
 {% endif %}
 
-<tr class="repr-section-header {{ section_class_name }}" {% if collapsed %} title="Show section" {% else %} title="Hide section" {% endif %}
+<tr class="mne-repr-section-header {{ section_class_name }}" {% if collapsed %} title="Show section" {% else %} title="Hide section" {% endif %}
     onclick="toggleVisibility('{{ section_class_name }}')">
-    <th class="repr-section-toggle-col">
-        <button>
-            {# This span is for the background SVG icon #}
-            <span class="collapse-uncollapse-caret"></span>
-        </button>
-    </th>
-    <th colspan="2">
-        <strong>{{ section }}</strong>
-    </th>
+    {%include 'static/_toggle.html.jinja' %}
 </tr>
 {% if filenames %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Filename(s)</td>
     <td>
         {% for f in filenames %}
@@ -33,12 +25,12 @@
 </tr>
 {% endif %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>MNE object type</td>
     <td>{{ inst | data_type }}</td>
 </tr>
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Measurement date</td>
     {% if info["meas_date"] is defined and info["meas_date"] is not none %}
     <td>{{ info["meas_date"] | dt_to_str }}</td>
@@ -47,7 +39,7 @@
     {% endif %}
 </tr>
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Participant</td>
     {% if info["subject_info"] is defined and info["subject_info"] is not none %}
     {% if info["subject_info"]["his_id"] is defined %}
@@ -58,7 +50,7 @@
     {% endif %}
 </tr>
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
-    <td class="repr-section-toggle-col"></td>
+    <td class="mne-repr-section-toggle"></td>
     <td>Experimenter</td>
     {% if info["experimenter"] is defined and info["experimenter"] is not none %}
     <td>{{ info["experimenter"] }}</td>
diff --git a/mne/html_templates/repr/epochs.html.jinja b/mne/html_templates/repr/epochs.html.jinja
index 991aa8de0e3..6b33c177e87 100644
--- a/mne/html_templates/repr/epochs.html.jinja
+++ b/mne/html_templates/repr/epochs.html.jinja
@@ -2,7 +2,7 @@
 
 {% set info = inst.info %}
 
-<table class="repr table table-hover table-striped table-sm table-responsive small">
+<table class="table mne-repr-table">
     {%include '_general.html.jinja' %}
     {%include '_acquisition.html.jinja' %}
     {%include '_channels.html.jinja' %}
diff --git a/mne/html_templates/repr/evoked.html.jinja b/mne/html_templates/repr/evoked.html.jinja
index 991aa8de0e3..6b33c177e87 100644
--- a/mne/html_templates/repr/evoked.html.jinja
+++ b/mne/html_templates/repr/evoked.html.jinja
@@ -2,7 +2,7 @@
 
 {% set info = inst.info %}
 
-<table class="repr table table-hover table-striped table-sm table-responsive small">
+<table class="table mne-repr-table">
     {%include '_general.html.jinja' %}
     {%include '_acquisition.html.jinja' %}
     {%include '_channels.html.jinja' %}
diff --git a/mne/html_templates/repr/forward.html.jinja b/mne/html_templates/repr/forward.html.jinja
index 22be9248ecc..510a775c2b6 100644
--- a/mne/html_templates/repr/forward.html.jinja
+++ b/mne/html_templates/repr/forward.html.jinja
@@ -1,12 +1,12 @@
 {%include '_js_and_css.html.jinja' %}
 
-<table class="table table-hover table-striped table-sm table-responsive small">
+<table class="table mne-repr-table">
     {% for channel_type, channels in (info | format_channels).items() %}
     {% set channel_names_good = channels["good"] | map(attribute='name_html') | join(', ') %}
     <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
         <th>{{ channel_type }}</th>
         <td>
-            <button class="channel-names-btn"
+            <button class="mne-ch-names-btn sd-sphinx-override sd-button sd-btn-info sd-text-wrap sd-shadow-sm"
                 onclick="alert('Good {{ channel_type}}:\n\n{{ channel_names_good | safe }}')"
                 title="Show good channel names">
                 {{ channels["good"] | length}}
@@ -14,7 +14,7 @@
 
             {% if channels["bad"] %}
             {% set channel_names_bad = channels["bad"] | map(attribute='name_html') | join(', ') %}
-            and <button class="channel-names-btn"
+            and <button class="mne-ch-names-btn sd-sphinx-override sd-button sd-btn-info sd-text-wrap sd-shadow-sm"
                 onclick="alert('Bad {{ channel_type}}:\n\n{{ channel_names_bad | safe }}')"
                 title="Show bad channel names">
                 {{ channels["bad"] | length}} bad
diff --git a/mne/html_templates/repr/ica.html.jinja b/mne/html_templates/repr/ica.html.jinja
index 69bd5803a59..62762098365 100644
--- a/mne/html_templates/repr/ica.html.jinja
+++ b/mne/html_templates/repr/ica.html.jinja
@@ -1,4 +1,4 @@
-<table class="table table-hover table-striped table-sm table-responsive small">
+<table class="table mne-repr-table">
     <tr>
         <th>Method</th>
         <td>{{ method }}</td>
diff --git a/mne/html_templates/repr/info.html.jinja b/mne/html_templates/repr/info.html.jinja
index d30c21ff9bf..64463728979 100644
--- a/mne/html_templates/repr/info.html.jinja
+++ b/mne/html_templates/repr/info.html.jinja
@@ -2,7 +2,7 @@
 
 {%set inst = info %}
 
-<table class="repr table table-hover table-striped table-sm table-responsive small">
+<table class="table mne-repr-table">
     {%include '_general.html.jinja' %}
     {%include '_acquisition.html.jinja' %}
     {%include '_channels.html.jinja' %}
diff --git a/mne/html_templates/repr/inverse_operator.html.jinja b/mne/html_templates/repr/inverse_operator.html.jinja
index 31376a6e6c8..63d1ee8cf3b 100644
--- a/mne/html_templates/repr/inverse_operator.html.jinja
+++ b/mne/html_templates/repr/inverse_operator.html.jinja
@@ -1,4 +1,4 @@
-<table class="table table-hover table-striped table-sm table-responsive small">
+<table class="table mne-repr-table">
     <tr>
         <th>Channels</th>
         <td>{{ channels }}</td>
diff --git a/mne/html_templates/repr/raw.html.jinja b/mne/html_templates/repr/raw.html.jinja
index 991aa8de0e3..6b33c177e87 100644
--- a/mne/html_templates/repr/raw.html.jinja
+++ b/mne/html_templates/repr/raw.html.jinja
@@ -2,7 +2,7 @@
 
 {% set info = inst.info %}
 
-<table class="repr table table-hover table-striped table-sm table-responsive small">
+<table class="table mne-repr-table">
     {%include '_general.html.jinja' %}
     {%include '_acquisition.html.jinja' %}
     {%include '_channels.html.jinja' %}
diff --git a/mne/html_templates/repr/spectrum.html.jinja b/mne/html_templates/repr/spectrum.html.jinja
index ee35f8e2ec1..11a1d7a886f 100644
--- a/mne/html_templates/repr/spectrum.html.jinja
+++ b/mne/html_templates/repr/spectrum.html.jinja
@@ -1,4 +1,4 @@
-<table class="table table-hover table-striped table-sm table-responsive small">
+<table class="table mne-repr-table">
     <tr>
         <th>Data type</th>
         <td>{{ spectrum._data_type }}</td>
diff --git a/mne/html_templates/repr/static/_toggle.html.jinja b/mne/html_templates/repr/static/_toggle.html.jinja
new file mode 100644
index 00000000000..76d5d5b52f7
--- /dev/null
+++ b/mne/html_templates/repr/static/_toggle.html.jinja
@@ -0,0 +1,8 @@
+<th class="mne-repr-section-toggle">
+    <button class="collapsed">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
+    </button>
+</th>
+<th colspan="2">
+    <strong>{{ section }}</strong>
+</th>
diff --git a/mne/html_templates/repr/static/repr.css b/mne/html_templates/repr/static/repr.css
index cee7e3224f8..c130afd57d7 100644
--- a/mne/html_templates/repr/static/repr.css
+++ b/mne/html_templates/repr/static/repr.css
@@ -1,105 +1,47 @@
-table.repr.table.table-hover.table-striped.table-sm.table-responsive.small {
-  /* Don't make rows wider than they need to be. */
-  display: inline;
-}
-
-table > tbody > tr.repr-element > td {
-  /* Apply a tighter layout to the table cells. */
-  padding-top: 0.1rem;
-  padding-bottom: 0.1rem;
-  padding-right: 1rem;
-}
-
-table > tbody > tr > td.repr-section-toggle-col {
-  /* Remove background and border of the first cell in every row
-     (this row is only used for the collapse / uncollapse caret)
-
-     TODO: Need to find a good solution for VS Code that works in both
-           light and dark mode. */
-  border-color: transparent;
-  --bs-table-accent-bg: transparent;
-}
-
-tr.repr-section-header {
-  /* Remove stripes from section header rows */
-  background-color: transparent;
-  border-color: transparent;
-  --bs-table-striped-bg: transparent;
-  cursor: pointer;
-}
-
-tr.repr-section-header > th {
-  text-align: left !important;
-  vertical-align: middle;
-}
-
-.repr-element, tr.repr-element > td {
-  opacity: 1;
-  text-align: left !important;
-}
-
-.repr-element-faded {
-  transition: 0.3s ease;
-  opacity: 0.2;
-}
-
-.repr-element-collapsed {
-  display: none;
-}
-
-/* Collapse / uncollapse button and the caret it contains. */
-.repr-section-toggle-col button {
-  cursor: pointer;
-  width: 1rem;
-  background-color: transparent;
-  border-color: transparent;
-}
-
-span.collapse-uncollapse-caret {
-  width: 1rem;
-  height: 1rem;
-  display: block;
-  background-repeat: no-repeat;
-  background-position: left;
-  background-size: contain;
-}
-
-/* The collapse / uncollapse carets were copied from the free Font Awesome collection and adjusted. */
-
-/* Default to black carets for light mode */
-.repr-section-toggle-col > button.collapsed > span.collapse-uncollapse-caret {
-  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="black" d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
-}
-
-.repr-section-toggle-col
-  > button:not(.collapsed)
-  > span.collapse-uncollapse-caret {
-  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="black" d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>');
-}
-
-/* Use white carets for dark mode */
-@media (prefers-color-scheme: dark) {
-  .repr-section-toggle-col > button.collapsed > span.collapse-uncollapse-caret {
-    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="white" d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
-  }
-
-  .repr-section-toggle-col
-    > button:not(.collapsed)
-    > span.collapse-uncollapse-caret {
-    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="white" d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>');
-  }
-}
-
-.channel-names-btn {
-  padding: 0;
-  border: none;
-  background: none;
-  text-decoration: underline;
-  text-decoration-style: dashed;
-  cursor: pointer;
-  color: #0d6efd;
-}
-
-.channel-names-btn:hover {
-  color: #0a58ca;
-}
+/*
+These styles are outside the @layer, because we want them to *definitely* apply on the
+built website docs; if they're inside the layer, any unlayered CSS (e.g. in the sphinx
+theme, sphinx-gallery, or bootstrap CSS) will take precedence.
+*/
+.mne-repr-table {
+    display: inline;  /* prevent using full-container-width */
+}
+.mne-repr-table tr.mne-repr-section-header > th {
+    text-align: left;
+    vertical-align: middle;
+}
+.mne-repr-section-toggle > button {
+    all: unset;
+    display: block;
+    padding: 20%;
+    height: 1rem;
+    width: 1rem;
+}
+.mne-repr-section-toggle > button > svg {
+    height: 60%;
+}
+
+/* transition (rotation) effects on the collapser button */
+.mne-repr-section-toggle > button.collapsed > svg {
+    transition: 0.1s ease-out;
+    transform: rotate(-90deg);
+}
+.mne-repr-section-toggle > button:not(.collapsed) > svg {
+    transition: 0.1s ease-out;
+    transform: rotate(0deg);
+}
+
+/* hide collapsed table rows */
+.mne-repr-collapsed {
+    display: none;
+}
+
+@layer mne-html-repr {
+    /*
+    In our web docs, styles here will be overridden by doc/_static/styles.css and other
+    CSS files (e.g. from theme, sphinx-gallery, or bootstrap). But in IDEs, those style
+    files are unavailable, so only rules in this file apply. When adding rules in this
+    layer, make sure they don't affect the built HTML site! If necessary, add a
+    complementary rule in doc/_static/styles.css to override rules added here.
+    */
+}
\ No newline at end of file
diff --git a/mne/html_templates/repr/static/repr.js b/mne/html_templates/repr/static/repr.js
index 78ed06808b7..00c9d327d97 100644
--- a/mne/html_templates/repr/static/repr.js
+++ b/mne/html_templates/repr/static/repr.js
@@ -1,35 +1,23 @@
-const toggleVisibility = (className) => {
+// must be `var` (not `const`) because this can get embedded multiple times on a page
+var toggleVisibility = (className) => {
 
-  const elements = document.querySelectorAll(`.${className}`)
+    const elements = document.querySelectorAll(`.${className}`);
 
-  elements.forEach(element => {
-    if (element.classList.contains('repr-section-header')) {
-      // Don't collapse the section header row.
-       return
-    }
-    if (element.classList.contains('repr-element-collapsed')) {
-      // Force a reflow to ensure the display change takes effect before removing the class
-      element.classList.remove('repr-element-collapsed')
-      element.offsetHeight // This forces the browser to recalculate layout
-      element.classList.remove('repr-element-faded')
-    } else {
-      // Start transition to hide the element
-      element.classList.add('repr-element-faded')
-      element.addEventListener('transitionend', handler = (e) => {
-        if (e.propertyName === 'opacity' && getComputedStyle(element).opacity === '0.2') {
-          element.classList.add('repr-element-collapsed')
-          element.removeEventListener('transitionend', handler)
+    elements.forEach(element => {
+        if (element.classList.contains("mne-repr-section-header")) {
+            return  // Don't collapse the section header row
         }
-      });
-    }
-  });
+        element.classList.toggle("mne-repr-collapsed");
+    });
 
-  // Take care of button (adjust caret)
-  const button = document.querySelectorAll(`.repr-section-header.${className} > th.repr-section-toggle-col > button`)[0]
-  button.classList.toggle('collapsed')
+    // trigger caret to rotate
+    var sel = `.mne-repr-section-header.${className} > th.mne-repr-section-toggle > button`;
+    const button = document.querySelector(sel);
+    button.classList.toggle("collapsed");
 
-  // Take care of the tooltip of the section header row
-  const sectionHeaderRow = document.querySelectorAll(`tr.repr-section-header.${className}`)[0]
-  sectionHeaderRow.classList.toggle('collapsed')
-  sectionHeaderRow.title = sectionHeaderRow.title === 'Hide section' ? 'Show section' : 'Hide section'
+    // adjust tooltip
+    sel = `tr.mne-repr-section-header.${className}`;
+    const secHeadRow = document.querySelector(sel);
+    secHeadRow.classList.toggle("collapsed");
+    secHeadRow.title = secHeadRow.title === "Hide section" ? "Show section" : "Hide section";
 }
diff --git a/mne/html_templates/repr/tfr.html.jinja b/mne/html_templates/repr/tfr.html.jinja
index f6ab107ab0b..d2881a0db58 100644
--- a/mne/html_templates/repr/tfr.html.jinja
+++ b/mne/html_templates/repr/tfr.html.jinja
@@ -1,4 +1,4 @@
-<table class="table table-hover table-striped table-sm table-responsive small">
+<table class="table mne-repr-table">
     <tr>
         <th>Data type</th>
         <td>{{ tfr._data_type }}</td>

From acd5984b17fc481794cfae27b96257f555a3ab93 Mon Sep 17 00:00:00 2001
From: Daniel McCloy <dan@mccloy.info>
Date: Tue, 13 Aug 2024 14:58:24 -0500
Subject: [PATCH 2/8] touch a couple tutorials

---
 tutorials/intro/70_report.py     | 4 ++--
 tutorials/raw/20_event_arrays.py | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/tutorials/intro/70_report.py b/tutorials/intro/70_report.py
index 575c641989e..31d07083151 100644
--- a/tutorials/intro/70_report.py
+++ b/tutorials/intro/70_report.py
@@ -6,8 +6,8 @@
 ===============================
 
 :class:`mne.Report` is a way to create interactive HTML summaries of your data.
-These reports can show many different visualizations for one or multiple
-participants. A common use case is creating diagnostic summaries to check data
+These reports can show many different visualizations for one or multiple participants.
+A common use case is creating diagnostic summaries to check data
 quality at different stages in the processing pipeline. The report can show
 things like plots of data before and after each preprocessing step, epoch
 rejection statistics, MRI slices with overlaid BEM shells, all the way up to
diff --git a/tutorials/raw/20_event_arrays.py b/tutorials/raw/20_event_arrays.py
index e66db1003b7..83adf8c4852 100644
--- a/tutorials/raw/20_event_arrays.py
+++ b/tutorials/raw/20_event_arrays.py
@@ -5,8 +5,8 @@
 Working with events
 ===================
 
-This tutorial describes event representation and how event arrays are used to
-subselect data.
+This tutorial describes event representation and how event arrays are used to subselect
+data.
 
 As usual we'll start by importing the modules we need, loading some
 :ref:`example data <sample-dataset>`, and cropping the :class:`~mne.io.Raw`

From 9e932eb38f4fc9f5eb0651f8901c0d04a86d7319 Mon Sep 17 00:00:00 2001
From: Daniel McCloy <dan@mccloy.info>
Date: Tue, 13 Aug 2024 14:58:37 -0500
Subject: [PATCH 3/8] unrelated tutorial formatting fix

---
 tutorials/io/70_reading_eyetracking_data.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/io/70_reading_eyetracking_data.py b/tutorials/io/70_reading_eyetracking_data.py
index 781b89fab9e..ddcf0643ad6 100644
--- a/tutorials/io/70_reading_eyetracking_data.py
+++ b/tutorials/io/70_reading_eyetracking_data.py
@@ -161,7 +161,7 @@
 # position for each sample in the file. MNE will read in these data if they are
 # present in the file, but will label their channel types as ``'misc'``.
 #
-#  .. warning:: Eyelink's EDF2ASC API allows for modification of the data
+# .. warning:: Eyelink's EDF2ASC API allows for modification of the data
 #              and format that is converted to ASCII. However, MNE-Python
 #              assumes a specific structure, which the default parameters of
 #              EDF2ASC follow. ASCII files should be tab-deliminted, and both

From 7e0b6f298973c312e9a35b335a2bb8e2660d5b04 Mon Sep 17 00:00:00 2001
From: Daniel McCloy <dan@mccloy.info>
Date: Tue, 13 Aug 2024 17:35:14 -0500
Subject: [PATCH 4/8] updates for jupyter notebook

---
 doc/_static/style.css                   |  4 +++-
 mne/html_templates/repr/static/repr.css | 29 ++++++++++++++++++++-----
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/doc/_static/style.css b/doc/_static/style.css
index caf054684ea..1bb371b6d1c 100644
--- a/doc/_static/style.css
+++ b/doc/_static/style.css
@@ -170,6 +170,9 @@ iframe.sg_report {
 .mne-repr-table tbody tr:hover {
     background-color: var(--pst-color-table-row-hover-bg);
 }
+.mne-repr-section-toggle > button {
+    padding: 20%;
+}
 .mne-repr-section-toggle > button > svg > path {
     fill: var(--pst-color-text-base);
 }
@@ -178,7 +181,6 @@ make section header rows more distinct (and harmonize with pydata-sphinx-theme t
 style in the process). Color copied from pydata-sphinx-theme; 2px copied from bootstrap.
 */
 .mne-repr-table th {
-    padding-top: 1rem;
     border-bottom: 2px solid var(--pst-color-primary);
 }
 
diff --git a/mne/html_templates/repr/static/repr.css b/mne/html_templates/repr/static/repr.css
index c130afd57d7..ffd4cd79da8 100644
--- a/mne/html_templates/repr/static/repr.css
+++ b/mne/html_templates/repr/static/repr.css
@@ -6,14 +6,15 @@ theme, sphinx-gallery, or bootstrap CSS) will take precedence.
 .mne-repr-table {
     display: inline;  /* prevent using full-container-width */
 }
+
 .mne-repr-table tr.mne-repr-section-header > th {
+    padding-top: 1rem;
     text-align: left;
     vertical-align: middle;
 }
 .mne-repr-section-toggle > button {
     all: unset;
     display: block;
-    padding: 20%;
     height: 1rem;
     width: 1rem;
 }
@@ -38,10 +39,26 @@ theme, sphinx-gallery, or bootstrap CSS) will take precedence.
 
 @layer mne-html-repr {
     /*
-    In our web docs, styles here will be overridden by doc/_static/styles.css and other
-    CSS files (e.g. from theme, sphinx-gallery, or bootstrap). But in IDEs, those style
-    files are unavailable, so only rules in this file apply. When adding rules in this
-    layer, make sure they don't affect the built HTML site! If necessary, add a
-    complementary rule in doc/_static/styles.css to override rules added here.
+    In our web docs, styles in these layers will be overridden by doc/_static/styles.css
+    and other CSS files (e.g. from theme, sphinx-gallery, or bootstrap). But in IDEs,
+    those style files are unavailable, so only rules in this file apply. When adding
+    rules in this layer, make sure they don't affect the built HTML site! If necessary,
+    add a complementary rule in doc/_static/styles.css to override rules added here.
+
+    NB: variables starting with `--jp-` are Jupyter styles.
     */
+    .mne-repr-section-toggle > button {
+        padding: 0 0 40% 20%;
+    }
+    .mne-repr-section-toggle > button > svg > path {
+        fill: var(--jp-ui-font-color1);
+    }
+    .mne-ch-names-button {
+        all: unset;
+        color: var(--jp-content-link-color);
+    }
+    .mne-ch-names-button:hover {
+        text-decoration: underline;
+        color: var(--jp-content-link-hover-color);
+    }
 }
\ No newline at end of file

From dbfa9b025bb9a13c9a6b23f306eb38ffe12e26f3 Mon Sep 17 00:00:00 2001
From: Daniel McCloy <dan@mccloy.info>
Date: Wed, 14 Aug 2024 16:08:27 -0500
Subject: [PATCH 5/8] handle vscode; some refactors

---
 doc/_static/style.css                   | 29 ++++++---
 mne/html_templates/repr/static/repr.css | 81 ++++++++++++++++++-------
 2 files changed, 81 insertions(+), 29 deletions(-)

diff --git a/doc/_static/style.css b/doc/_static/style.css
index 1bb371b6d1c..8e53c6a49eb 100644
--- a/doc/_static/style.css
+++ b/doc/_static/style.css
@@ -170,21 +170,36 @@ iframe.sg_report {
 .mne-repr-table tbody tr:hover {
     background-color: var(--pst-color-table-row-hover-bg);
 }
-.mne-repr-section-toggle > button {
-    padding: 20%;
-}
 .mne-repr-section-toggle > button > svg > path {
     fill: var(--pst-color-text-base);
 }
-/*
-make section header rows more distinct (and harmonize with pydata-sphinx-theme table
+/* make the expand/collapse button look nicer */
+.mne-repr-section-toggle > button {
+    padding: 20%;
+}
+/* make section header rows more distinct (and harmonize with pydata-sphinx-theme table
 style in the process). Color copied from pydata-sphinx-theme; 2px copied from bootstrap.
 */
 .mne-repr-table th {
     border-bottom: 2px solid var(--pst-color-primary);
 }
-
-
+/* harmonize the channel names buttons with the rest of the table */
+.mne-ch-names-btn {
+    font-size: inherit;
+    padding: 0.25rem;
+    min-width: 1.5rem;
+    font-weight: bold;
+}
+/*
+.mne-ch-names-btn:hover {
+    background-color: var(--pst-color-);
+    text-decoration: underline;
+}
+.mne-ch-names-btn:focus-visible {
+    outline: 0.1875rem solid var(--pst-color-accent);
+    outline-offset: 0.1875rem;
+}
+*/
 /* ***************************************************** sphinx-design fixes */
 p.btn a {
     color: unset;
diff --git a/mne/html_templates/repr/static/repr.css b/mne/html_templates/repr/static/repr.css
index ffd4cd79da8..55666a8a5b3 100644
--- a/mne/html_templates/repr/static/repr.css
+++ b/mne/html_templates/repr/static/repr.css
@@ -1,12 +1,13 @@
 /*
-These styles are outside the @layer, because we want them to *definitely* apply on the
-built website docs; if they're inside the layer, any unlayered CSS (e.g. in the sphinx
-theme, sphinx-gallery, or bootstrap CSS) will take precedence.
+Styles in this section apply both to the sphinx-built website docs and to notebooks
+rendered in an IDE or in Jupyter. In our web docs, styles here are complemented by
+doc/_static/styles.css and other CSS files (e.g. from the sphinx theme, sphinx-gallery,
+or bootstrap). In IDEs/Jupyter, those style files are unavailable, so only the rules in
+this file apply (plus whatever default styling the IDE applies).
 */
 .mne-repr-table {
-    display: inline;  /* prevent using full-container-width */
+    display: inline;  /* prevent using full container width */
 }
-
 .mne-repr-table tr.mne-repr-section-header > th {
     padding-top: 1rem;
     text-align: left;
@@ -37,28 +38,64 @@ theme, sphinx-gallery, or bootstrap CSS) will take precedence.
     display: none;
 }
 
-@layer mne-html-repr {
+
+@layer {
     /*
-    In our web docs, styles in these layers will be overridden by doc/_static/styles.css
-    and other CSS files (e.g. from theme, sphinx-gallery, or bootstrap). But in IDEs,
-    those style files are unavailable, so only rules in this file apply. When adding
-    rules in this layer, make sure they don't affect the built HTML site! If necessary,
-    add a complementary rule in doc/_static/styles.css to override rules added here.
+    Selectors in a `@layer` will always be lower-precedence than selectors outside the
+    layer. So even though e.g. `div.output_html` is present in the sphinx-rendered
+    website docs, the styles here won't take effect there as, long as some other rule
+    somewhere in the page's CSS targets the same element.
+
+    In IDEs or Jupyter notebooks, though, the CSS files from the sphinx theme,
+    sphinx-gallery, and bootstrap are unavailable, so these styles will apply.
+
+    Notes:
 
-    NB: variables starting with `--jp-` are Jupyter styles.
+    - the selector `.output_html` is for VSCode's notebook interface
+    - the selector `.jp-RenderedHTML` is for Jupyter notebook
+    - variables starting with `--theme-` are VSCode-specific.
+    - variables starting with `--jp-` are Jupyter styles, *some of which* are also
+      available in VSCode. Here we try the `--theme-` variable first, then fall back to
+      the `--jp-` ones.
     */
-    .mne-repr-section-toggle > button {
-        padding: 0 0 40% 20%;
+    .mne-repr-table {
+        --mne-toggle-color: var(--theme-foreground, var(--jp-ui-font-color1));
+        --mne-button-bg-color: var(--theme-button-background, var(--jp-info-color0, var(--jp-content-link-color)));
+        --mne-button-fg-color: var(--theme-button-foreground, var(--jp-ui-inverse-font-color0, var(--jp-editor-background)));
+        --mne-button-hover-bg-color: var(--theme-button-hover-background, var(--jp-info-color1));
+        --mne-button-radius: var(--jp-border-radius, 0.25rem);
     }
-    .mne-repr-section-toggle > button > svg > path {
-        fill: var(--jp-ui-font-color1);
+    .jp-RenderedHTML .mne-repr-section-toggle > button {
+        /* Jupyter only; in VSCode it looks ok without this */
+        padding: 0 0 40% 20% !important;
     }
-    .mne-ch-names-button {
-        all: unset;
-        color: var(--jp-content-link-color);
+    div.output_html .mne-repr-section-toggle > button > svg > path,
+    .jp-RenderedHTML .mne-repr-section-toggle > button > svg > path {
+        fill: var(--mne-toggle-color);
     }
-    .mne-ch-names-button:hover {
+    div.output_html .mne-ch-names-btn,
+    .jp-RenderedHTML .mne-ch-names-btn {
+        -webkit-border-radius: var(--mne-button-radius);
+        -moz-border-radius: var(--mne-button-radius);
+        border-radius: var(--mne-button-radius);
+        border: none;
+        background-image: none;
+        background-color: var(--mne-button-bg-color);
+        color: var(--mne-button-fg-color);
+        font-size: inherit;
+        min-width: 1.5rem;
+        padding: 0.25rem;
+        text-align: center;
+        text-decoration: none;
+    }
+    div.output_html .mne.ch-names-btn:hover,
+    .jp-RenderedHTML .mne-ch-names-btn:hover {
+        background-color: var(--mne-button-hover-bg-color);
         text-decoration: underline;
-        color: var(--jp-content-link-hover-color);
     }
-}
\ No newline at end of file
+    div.output_html .mne-ch-names-btn:focus-visible,
+    .jp-RenderedHTML .mne-ch-names-btn:focus-visible {
+        outline: 0.1875rem solid var(--mne-button-bg-color) !important;
+        outline-offset: 0.1875rem !important;
+    }
+}

From f8425071daccd1b827f8a0f7ccc48e0d524bf201 Mon Sep 17 00:00:00 2001
From: Daniel McCloy <dan@mccloy.info>
Date: Fri, 20 Sep 2024 12:45:45 -0500
Subject: [PATCH 6/8] more DRY; fix toggle chevron direction

---
 mne/html_templates/repr/_acquisition.html.jinja      |  6 ++----
 mne/html_templates/repr/_channels.html.jinja         |  6 ++----
 mne/html_templates/repr/_filters.html.jinja          |  6 ++----
 mne/html_templates/repr/_general.html.jinja          |  6 ++----
 .../repr/static/_section_header_row.html.jinja       | 12 ++++++++++++
 mne/html_templates/repr/static/_toggle.html.jinja    |  8 --------
 6 files changed, 20 insertions(+), 24 deletions(-)
 create mode 100644 mne/html_templates/repr/static/_section_header_row.html.jinja
 delete mode 100644 mne/html_templates/repr/static/_toggle.html.jinja

diff --git a/mne/html_templates/repr/_acquisition.html.jinja b/mne/html_templates/repr/_acquisition.html.jinja
index 16193d75ac3..0016740cdf8 100644
--- a/mne/html_templates/repr/_acquisition.html.jinja
+++ b/mne/html_templates/repr/_acquisition.html.jinja
@@ -8,10 +8,8 @@
 {% set collapsed_row_class = "" %}
 {% endif %}
 
-<tr class="mne-repr-section-header {{ section_class_name }}" {% if collapsed %} title="Show section" {% else %}
-    title="Hide section" {% endif %} onclick="toggleVisibility('{{ section_class_name }}')">
-    {%include 'static/_toggle.html.jinja' %}
-</tr>
+{%include 'static/_section_header_row.html.jinja' %}
+
 {% if duration %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
     <td class="mne-repr-section-toggle"></td>
diff --git a/mne/html_templates/repr/_channels.html.jinja b/mne/html_templates/repr/_channels.html.jinja
index 63ddc1f8829..4f7646e9c80 100644
--- a/mne/html_templates/repr/_channels.html.jinja
+++ b/mne/html_templates/repr/_channels.html.jinja
@@ -8,10 +8,8 @@
 {% set collapsed_row_class = "" %}
 {% endif %}
 
-<tr class="mne-repr-section-header {{ section_class_name }}" {% if collapsed %} title="Show section" {% else %} title="Hide section" {% endif %}
-    onclick="toggleVisibility('{{ section_class_name }}')">
-    {%include 'static/_toggle.html.jinja' %}
-</tr>
+{%include 'static/_section_header_row.html.jinja' %}
+
 {% for channel_type, channels in (info | format_channels).items() %}
 {% set channel_names_good = channels["good"] | map(attribute='name_html') | join(', ') %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
diff --git a/mne/html_templates/repr/_filters.html.jinja b/mne/html_templates/repr/_filters.html.jinja
index 384ec31bda0..97ede5157c1 100644
--- a/mne/html_templates/repr/_filters.html.jinja
+++ b/mne/html_templates/repr/_filters.html.jinja
@@ -8,10 +8,8 @@
 {% set collapsed_row_class = "" %}
 {% endif %}
 
-<tr class="mne-repr-section-header {{ section_class_name }}" {% if collapsed %} title="Show section" {% else %} title="Hide section" {% endif %}
-    onclick="toggleVisibility('{{ section_class_name }}')">
-    {%include 'static/_toggle.html.jinja' %}
-</tr>
+{%include 'static/_section_header_row.html.jinja' %}
+
 {% if info["highpass"] is defined and info["highpass"] is not none %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
     <td class="mne-repr-section-toggle"></td>
diff --git a/mne/html_templates/repr/_general.html.jinja b/mne/html_templates/repr/_general.html.jinja
index 4b56619e3d2..a57ae40049d 100644
--- a/mne/html_templates/repr/_general.html.jinja
+++ b/mne/html_templates/repr/_general.html.jinja
@@ -8,10 +8,8 @@
 {% set collapsed_row_class = "" %}
 {% endif %}
 
-<tr class="mne-repr-section-header {{ section_class_name }}" {% if collapsed %} title="Show section" {% else %} title="Hide section" {% endif %}
-    onclick="toggleVisibility('{{ section_class_name }}')">
-    {%include 'static/_toggle.html.jinja' %}
-</tr>
+{%include 'static/_section_header_row.html.jinja' %}
+
 {% if filenames %}
 <tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
     <td class="mne-repr-section-toggle"></td>
diff --git a/mne/html_templates/repr/static/_section_header_row.html.jinja b/mne/html_templates/repr/static/_section_header_row.html.jinja
new file mode 100644
index 00000000000..d8d3da21d3f
--- /dev/null
+++ b/mne/html_templates/repr/static/_section_header_row.html.jinja
@@ -0,0 +1,12 @@
+<tr class="mne-repr-section-header {{ section_class_name }}"
+    {% if collapsed %} title="Show section" {% else %} title="Hide section" {% endif %}
+    onclick="toggleVisibility('{{ section_class_name }}')">
+    <th class="mne-repr-section-toggle">
+        <button {% if collapsed %}class="collapsed"{% endif %}>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
+        </button>
+    </th>
+    <th colspan="2">
+        <strong>{{ section }}</strong>
+    </th>
+</tr>
diff --git a/mne/html_templates/repr/static/_toggle.html.jinja b/mne/html_templates/repr/static/_toggle.html.jinja
deleted file mode 100644
index 76d5d5b52f7..00000000000
--- a/mne/html_templates/repr/static/_toggle.html.jinja
+++ /dev/null
@@ -1,8 +0,0 @@
-<th class="mne-repr-section-toggle">
-    <button class="collapsed">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
-    </button>
-</th>
-<th colspan="2">
-    <strong>{{ section }}</strong>
-</th>

From b9f4d01e95b807f5ee5170bdc2b8dfbecc654e72 Mon Sep 17 00:00:00 2001
From: Daniel McCloy <dan@mccloy.info>
Date: Fri, 20 Sep 2024 12:46:00 -0500
Subject: [PATCH 7/8] typo in CSS comment

---
 mne/html_templates/repr/static/repr.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mne/html_templates/repr/static/repr.css b/mne/html_templates/repr/static/repr.css
index 55666a8a5b3..47ee24a7744 100644
--- a/mne/html_templates/repr/static/repr.css
+++ b/mne/html_templates/repr/static/repr.css
@@ -43,7 +43,7 @@ this file apply (plus whatever default styling the IDE applies).
     /*
     Selectors in a `@layer` will always be lower-precedence than selectors outside the
     layer. So even though e.g. `div.output_html` is present in the sphinx-rendered
-    website docs, the styles here won't take effect there as, long as some other rule
+    website docs, the styles here won't take effect there as long as some other rule
     somewhere in the page's CSS targets the same element.
 
     In IDEs or Jupyter notebooks, though, the CSS files from the sphinx theme,

From 7919d2c01f298f9225f3c4c795ab9ed1aed34195 Mon Sep 17 00:00:00 2001
From: Daniel McCloy <dan@mccloy.info>
Date: Fri, 20 Sep 2024 15:34:21 -0500
Subject: [PATCH 8/8] fix reports

---
 mne/html_templates/repr/static/repr.css | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/mne/html_templates/repr/static/repr.css b/mne/html_templates/repr/static/repr.css
index 47ee24a7744..58931878430 100644
--- a/mne/html_templates/repr/static/repr.css
+++ b/mne/html_templates/repr/static/repr.css
@@ -51,6 +51,7 @@ this file apply (plus whatever default styling the IDE applies).
 
     Notes:
 
+    - the selector `.accordion-body` is for MNE Reports
     - the selector `.output_html` is for VSCode's notebook interface
     - the selector `.jp-RenderedHTML` is for Jupyter notebook
     - variables starting with `--theme-` are VSCode-specific.
@@ -65,14 +66,17 @@ this file apply (plus whatever default styling the IDE applies).
         --mne-button-hover-bg-color: var(--theme-button-hover-background, var(--jp-info-color1));
         --mne-button-radius: var(--jp-border-radius, 0.25rem);
     }
+    /* chevron position/alignment; in VSCode it looks ok without adjusting */
+    .accordion-body .mne-repr-section-toggle > button,
     .jp-RenderedHTML .mne-repr-section-toggle > button {
-        /* Jupyter only; in VSCode it looks ok without this */
-        padding: 0 0 40% 20% !important;
+        padding: 0 0 45% 25% !important;
     }
+    /* chevron color; MNE Report doesn't have light/dark mode */
     div.output_html .mne-repr-section-toggle > button > svg > path,
     .jp-RenderedHTML .mne-repr-section-toggle > button > svg > path {
         fill: var(--mne-toggle-color);
     }
+    .accordion-body .mne-ch-names-btn,
     div.output_html .mne-ch-names-btn,
     .jp-RenderedHTML .mne-ch-names-btn {
         -webkit-border-radius: var(--mne-button-radius);
@@ -88,11 +92,13 @@ this file apply (plus whatever default styling the IDE applies).
         text-align: center;
         text-decoration: none;
     }
+    .accordion-body .mne-ch-names-btn:hover,
     div.output_html .mne.ch-names-btn:hover,
     .jp-RenderedHTML .mne-ch-names-btn:hover {
         background-color: var(--mne-button-hover-bg-color);
         text-decoration: underline;
     }
+    .accordion-body .mne-ch-names-btn:focus-visible,
     div.output_html .mne-ch-names-btn:focus-visible,
     .jp-RenderedHTML .mne-ch-names-btn:focus-visible {
         outline: 0.1875rem solid var(--mne-button-bg-color) !important;