Show interrupted query in resizing textarea, closes #1876

datasette/views/base.py

@@ -378,7 +378,11 @@ class DataView(BaseView):
                 <p>SQL query took too long. The time limit is controlled by the
                 <a href="https://docs.datasette.io/en/stable/settings.html#sql-time-limit-ms">sql_time_limit_ms</a>
                 configuration option.</p>
-                <pre>{}</pre>
+                <textarea style="width: 90%">{}</textarea>
+                <script>
+                let ta = document.querySelector("textarea");
+                ta.style.height = ta.scrollHeight + "px";
+                </script>
             """.format(
                         escape(ex.sql)
                     )

tests/test_api.py

@@ -662,7 +662,11 @@ def test_sql_time_limit(app_client_shorter_time_limit):
             "<p>SQL query took too long. The time limit is controlled by the\n"
             '<a href="https://docs.datasette.io/en/stable/settings.html#sql-time-limit-ms">sql_time_limit_ms</a>\n'
             "configuration option.</p>\n"
-            "<pre>select sleep(0.5)</pre>"
+            '<textarea style="width: 90%">select sleep(0.5)</textarea>\n'
+            "<script>\n"
+            'let ta = document.querySelector("textarea");\n'
+            'ta.style.height = ta.scrollHeight + "px";\n'
+            "</script>"
         ),
         "status": 400,
         "title": "SQL Interrupted",

tests/test_html.py

@@ -172,7 +172,7 @@ def test_sql_time_limit(app_client_shorter_time_limit):
         """
         <a href="https://docs.datasette.io/en/stable/settings.html#sql-time-limit-ms">sql_time_limit_ms</a>
     """.strip(),
-        "<pre>select sleep(0.5)</pre>",
+        '<textarea style="width: 90%">select sleep(0.5)</textarea>',
     ]
     for expected_html_fragment in expected_html_fragments:
         assert expected_html_fragment in response.text