_

index.html

@@ -57,23 +57,23 @@ <h2>This online demo is experimental.</h2>
             </label>
             <code data-handler="FileNameDisplay"></code>
         </div>
-        <div class="flex" data-handler="LargeFileWarning" data-hidden="">
+        <div class="flex" data-handler="LargeFileWarning" data-hidden>
             <div class="highlighted-block warning-block">
                 <div>
                     The selected file may be too large (<span
-                        data-file-size-display=""></span>)
+                        data-role="file-size-display"></span>)
                 </div>
                 <div>
                     This online demonstrator is running in your browser with
                     limited memory. We recommend trying it out on small data
-                    files (less than 100 MB), otherwise the report generation
+                    files (less than 100 MB), otherwise the report generation
                     might be slow or fail. For larger files, consider installing
                     Skrub and generating the report with a Python script.
                 </div>
             </div>
         </div>
-        <div data-handler="StatusContainer" data-hidden=""></div>
-        <details data-handler="CsvDialog" data-hidden=""
+        <div data-handler="StatusContainer" data-hidden></div>
+        <details data-handler="CsvDialog" data-hidden
             class="flow align-with-highlighted-block">
             <summary>CSV parsing parameters</summary>
             <div class="highlighted-block">
@@ -126,29 +126,31 @@ <h2>This online demo is experimental.</h2>
                     <h2>File contents</h2>
                     <div class="scroll">
                         <div>
-                            <pre data-csv-text-display=""></pre>
+                            <pre data-role="csv-text-display"></pre>
                         </div>
                     </div>
                 </div>
                 <div data-handler="CsvTablePreview">
                     <h2>Table preview</h2>
                     <div class="scroll">
-                        <div data-csv-table-display=""></div>
+                        <div data-role="csv-table-display"></div>
                     </div>
                 </div>
                 <div data-handler="CsvPreviewError"
                     class="highlighted-block error-block">
                     <div>
-                        There was an error processing <span data-file-name=""></span>.
+                        There was an error processing <span data-role="file-name-display"></span>.
                         You may need to adjust the encoding or CSV formatting
                         information above.
                         The error is shown below.
                     </div>
-                    <pre data-csv-error-display=""></pre>
+                    <div class="horizontal-scroll">
+                        <pre data-role="csv-error-display"></pre>
+                    </div>
                 </div>
             </div>
         </details>
-        <div data-handler="PythonSnippets" data-hidden="">
+        <div data-handler="PythonSnippets" data-hidden>
             <details class="highlighted-block tip-block">
                 <summary>How to generate this report in Python</summary>
                 <div>
@@ -163,7 +165,7 @@ <h2>Table preview</h2>
                         <div class="tab-panel">
                             <div class="copy-paste">
                                 <div class="horizontal-scroll gray-bg">
-                                    <pre data-pandas-snippet-display=""
+                                    <pre data-role="pandas-snippet-display"
                                          id="pandas-snippet-display"
                                          class="padding"></pre>
                                 </div>
@@ -173,7 +175,7 @@ <h2>Table preview</h2>
                         <input type="radio" name="library" id="polars" />
                         <label for="polars">polars</label>
                         <div class="tab-panel">
-                            <div data-polars-escape-warning="" data-hidden=""
+                            <div data-role="polars-escape-warning" data-hidden
                                 class="highlighted-block warning-block margin-bottom">
                                 <div>
                                     Polars only supports parsing CSV files that
@@ -190,7 +192,7 @@ <h2>Table preview</h2>
                             <div class="copy-paste">
 
                                 <div class="horizontal-scroll gray-bg">
-                                    <pre data-polars-snippet-display=""
+                                    <pre data-role="polars-snippet-display"
                                          id="polars-snippet-display"
                                          class="padding"></pre>
                                 </div>
@@ -203,17 +205,19 @@ <h2>Table preview</h2>
                 </div>
             </details>
         </div>
-        <div data-handler="Report" data-hidden=""></div>
-        <div data-handler="ReportError" data-hidden=""
+        <div data-handler="Report" data-hidden></div>
+        <div data-handler="ReportError" data-hidden
             class="highlighted-block error-block">
             <div>
-                Failed to compute report for <span data-file-name=""></span>.
+                Failed to compute report for <span data-role="file-name-display"></span>.
                 If the input is a CSV file, you may need to adjust the values for the
                 delimiter,
                 quote or escape characters in the menu above.
                 The error message is shown below.
             </div>
-            <pre data-report-error-display=""></pre>
+            <div class="horizontal-scroll">
+                <pre data-role="report-error-display"></pre>
+            </div>
         </div>
     </main>
 </body>