{"html_url": "https://github.com/simonw/datasette/issues/2010#issuecomment-1409406327", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/2010", "id": 1409406327, "node_id": "IC_kwDOBm6k_c5UAdV3", "user": {"value": 9599, "label": "simonw"}, "created_at": "2023-01-30T21:51:58Z", "updated_at": "2023-01-30T21:51:58Z", "author_association": "OWNER", "body": "Here's a quick prototype I knocked up for this:\r\n```diff\r\ndiff --git a/datasette/static/app.css b/datasette/static/app.css\r\nindex 71437bd4..d763bcff 100644\r\n--- a/datasette/static/app.css\r\n+++ b/datasette/static/app.css\r\n@@ -695,7 +695,48 @@ p.zero-results {\r\n \r\n \r\n \r\n+/* Force table to not be like tables anymore */\r\n+body.row table.rows-and-columns,\r\n+body.row .rows-and-columns thead,\r\n+body.row .rows-and-columns tbody,\r\n+body.row .rows-and-columns th,\r\n+body.row .rows-and-columns td,\r\n+body.row .rows-and-columns tr {\r\n+    display: block;\r\n+}\r\n+\r\n+/* Hide table headers (but not display: none;, for accessibility) */\r\n+body.row .rows-and-columns thead tr {\r\n+    position: absolute;\r\n+    top: -9999px;\r\n+    left: -9999px;\r\n+}\r\n+\r\n+body.row .rows-and-columns tr {\r\n+    border: 1px solid #ccc;\r\n+    margin-bottom: 1em;\r\n+    border-radius: 10px;\r\n+    background-color: white;\r\n+    padding: 0.2rem;\r\n+}\r\n \r\n+body.row .rows-and-columns td {\r\n+    /* Behave  like a \"row\" */\r\n+    border: none;\r\n+    border-bottom: 1px solid #eee;\r\n+    padding: 0;\r\n+    padding-left: 10%;\r\n+    padding-bottom: 0.3em;\r\n+}\r\n+\r\n+body.row .rows-and-columns td:before {\r\n+    display: block;\r\n+    color: black;\r\n+    padding-bottom: 0.2em;\r\n+    font-size: 0.8em;\r\n+    font-weight: bold;\r\n+    background-color: #f5f5f5;\r\n+}\r\n \r\n \r\n /* Overrides ===============================================================*/\r\ndiff --git a/datasette/templates/row.html b/datasette/templates/row.html\r\nindex 1d1b0bfd..339eb643 100644\r\n--- a/datasette/templates/row.html\r\n+++ b/datasette/templates/row.html\r\n@@ -5,6 +5,9 @@\r\n {% block extra_head %}\r\n {{- super() -}}\r\n <style>\r\n+{% for column in columns %}\r\n+body.row .rows-and-columns td:nth-of-type({{ loop.index }}):before { content: \"{{ column|escape_css_string }}\"; }\r\n+{% endfor %}\r\n @media only screen and (max-width: 576px) {\r\n {% for column in columns %}\r\n     .rows-and-columns td:nth-of-type({{ loop.index }}):before { content: \"{{ column|escape_css_string }}\"; }\r\n```\r\nNow the row page looks like this at all page widths:\r\n\r\n<img width=\"776\" alt=\"image\" src=\"https://user-images.githubusercontent.com/9599/215603142-4d020ac0-cc33-436c-a1c6-17c9bcf9edb1.png\">\r\n\r\nI think that's better (could do with a bit of tightening up).\r\n\r\nOne catch: you can't copy and paste the column labels, since they are added using generated content like this:\r\n\r\nhttps://github.com/simonw/datasette/blob/0b4a28691468b5c758df74fa1d72a823813c96bf/datasette/static/app.css#L752-L757\r\n\r\nhttps://github.com/simonw/datasette/blob/0b4a28691468b5c758df74fa1d72a823813c96bf/datasette/templates/row.html#L9-L11\r\n\r\nI think the row page should switch to different HTML entirely, rather than continuing to share the `<table>` that's used by the table page.\r\n\r\nThis will be a breaking change for users who customize Datasette, so I should aim to ship it before 1.0.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1563264257, "label": "Row page should default to card view"}, "performed_via_github_app": null}