cleanup remaining "dataview" names + small adjustments

src/skrubview/_data/templates/base.css

@@ -15,8 +15,12 @@
     margin-block-end: var(--skrubview-tiny);
 }
 
-{{ report_id_selector }}.skrubview-report input[type="checkbox"] {
-    margin-inline-start: var(--checkbox-margin, var(--skrubview-small));
+{{ report_id_selector }}.skrubview-report .skrubview-margin-r-s {
+    margin-inline-end: var(--skrubview-small);
+}
+
+{{ report_id_selector }}.skrubview-report .skrubview-margin-r-t {
+    margin-inline-end: var(--skrubview-tiny);
 }
 
 {{ report_id_selector }}.skrubview-report :is(td, th) {

src/skrubview/_data/templates/column-summary.html

@@ -1,9 +1,9 @@
 <div class="skrubview-card skrubview-column-summary {{"skrubview-constant-column" if column.value_is_constant else "" }}" id="{{ col_id }}" data-name-repr="{{ column.name.__repr__() }}">
     <div class="skrubview-card-header">
-        <h3>
+        <h3 class="skrubview-margin-r-t">
             <code class="skrubview-select-all">{{ column.name }}</code>
         </h3>
-        <input class="dataview-select-column-checkbox" type="checkbox" onchange="updateColSelection(event)" data-column-id="{{ col_id }}" data-report-id="{{ report_id }}" />
+        <input class="skrubview-select-column-checkbox" type="checkbox" onchange="updateColSelection(event)" data-column-id="{{ col_id }}" data-report-id="{{ report_id }}" />
         <code class="skrubview-float-end">{{ column.dtype }}</code>
     </div>
     <div class="skrubview-column-summary-content skrubview-wrapper">

src/skrubview/_data/templates/dataframe-columns.css

@@ -28,7 +28,6 @@
     {{ report_id_selector }}.skrubview-report #{{ compact_id }}:checked ~ .skrubview-column-summary-group {
         display: flex;
         flex-wrap: wrap;
-        column-gap: var(--skrubview-tiny);
     }
 
     {{ report_id_selector }}.skrubview-report #{{ compact_id }}:checked ~ * .skrubview-column-summary-content {

src/skrubview/_data/templates/dataframe-columns.html

@@ -4,7 +4,7 @@
         <summary><h2>Columns</h2></summary>
     <div>
         <p>Selected columns:</p>
-        <code class="dataview-selected-columns" id="{{ report_id }}-selected-columns"></code>
+        <code class="skrubview-selected-columns" id="{{ report_id }}-selected-columns"></code>
         <p>
             <button onclick='clearSelectedCols("{{ report_id }}")'>Clear</button>
             <button onclick='selectAllCols("{{ report_id }}")'>Select all</button>
@@ -13,9 +13,8 @@
     </div>
     {% if summary.n_constant_columns %}
     <input type="checkbox" id="{{ collapse_const_id }}" checked="true" />
-    <label for="{{ collapse_const_id }}">Collapse constant columns</label>
+    <label for="{{ collapse_const_id }}" class="skrubview-margin-r-s">Collapse constant columns</label>
     {% endif %}
-
     <input type="checkbox" id="{{ compact_id }}" checked="true" />
     <label for="{{ compact_id }}">Compact display</label>
 

src/skrubview/_data/templates/skrubview.js

@@ -3,7 +3,7 @@ function updateColSelection(event) {
 }
 
 function isSelectedCol(columnElem) {
-    const checkboxElem = columnElem.querySelector("input.dataview-select-column-checkbox[type='checkbox']");
+    const checkboxElem = columnElem.querySelector("input.skrubview-select-column-checkbox[type='checkbox']");
     return checkboxElem && checkboxElem.checked;
 }
 
@@ -12,21 +12,21 @@ function updateSelectedColsSnippet(reportId) {
     const allCols = reportElem.querySelectorAll(".skrubview-column-summary");
     const selectedCols = Array.from(allCols).filter(c => isSelectedCol(c));
     const snippet = selectedCols.map(col => col.dataset.nameRepr).join(", ");
-    const selectedColsElem = reportElem.querySelector(".dataview-selected-columns");
+    const selectedColsElem = reportElem.querySelector(".skrubview-selected-columns");
     selectedColsElem.textContent = "[" + snippet + "]";
 }
 
 function clearSelectedCols(reportId) {
     const reportElem = document.getElementById(reportId);
-    reportElem.querySelectorAll("input.dataview-select-column-checkbox[type='checkbox']").forEach(
+    reportElem.querySelectorAll("input.skrubview-select-column-checkbox[type='checkbox']").forEach(
         box => {box.checked = false;}
     );
     updateSelectedColsSnippet(reportId);
 }
 
 function selectAllCols(reportId) {
     const reportElem = document.getElementById(reportId);
-    reportElem.querySelectorAll("input.dataview-select-column-checkbox[type='checkbox']").forEach(
+    reportElem.querySelectorAll("input.skrubview-select-column-checkbox[type='checkbox']").forEach(
         box => {box.checked = true;}
     );
     updateSelectedColsSnippet(reportId);