From a4a80ef7103c1776eed198bbbdd4df93157eca09 Mon Sep 17 00:00:00 2001
From: Jerome Dockes <jerome@dockes.org>
Date: Tue, 9 Jan 2024 16:46:41 +0100
Subject: [PATCH] details for mobile

---
 src/skrubview/_data/templates/skrubview.css | 30 ++++++++++++++++++---
 src/skrubview/_data/templates/skrubview.js  | 22 ++++++++++++---
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/skrubview/_data/templates/skrubview.css b/src/skrubview/_data/templates/skrubview.css
index 76242da..6d520ea 100644
--- a/src/skrubview/_data/templates/skrubview.css
+++ b/src/skrubview/_data/templates/skrubview.css
@@ -80,15 +80,14 @@
     margin: 0.75rem;
     border-radius: 0.25rem;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, .2), 0px 4px 10px 0px rgba(0, 0, 0, .2);
-    overflow: hidden;
 }
 
 {{ report_id_selector }}.skrubview-report details:not({{ "[" }} open {{ "]" }}) {
-   display: inline;
+    display: inline;
 }
 
 {{ report_id_selector }}.skrubview-report * + details:not({{ "[" }} open {{ "]" }}) {
-   margin-inline-start: var(--skrubview-tiny);
+    margin-inline-start: var(--skrubview-tiny);
 }
 
 {{ report_id_selector }}.skrubview-report details{{ "[" }} open {{ "]" }} {
@@ -101,6 +100,8 @@
 }
 
 {{ report_id_selector }}.skrubview-report .skrubview-card-header {
+    border-radius: 0.25rem 0.25rem 0 0;
+
     display: flex;
     flex-wrap: wrap;
 
@@ -146,7 +147,28 @@
     justify-content: start;
 }
 
-
+/* remove the "compact display" option on narrow screens */
+@media screen and (max-width: 40rem) {
+    #{{ compact_id }} {
+        display: none;
+    }
+    #{{ compact_id }} + label {
+        display: none;
+    }
+
+    {{ report_id_selector }}.skrubview-report #{{ compact_id }}:checked ~ * .skrubview-column-summary-content {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        column-gap: var(--skrubview-tiny);
+    }
+
+    {{ report_id_selector }}.skrubview-report #{{ compact_id }}:checked ~ .skrubview-column-summary-group {
+        display: grid;
+        grid-template-columns: min(max-content, 1fr);
+        justify-content: start;
+    }
+}
 
 {{ report_id_selector }}.skrubview-report #{{ collapse_const_id }}:checked ~ * .skrubview-constant-column {
     display: none;
diff --git a/src/skrubview/_data/templates/skrubview.js b/src/skrubview/_data/templates/skrubview.js
index ac04f20..dbd449b 100644
--- a/src/skrubview/_data/templates/skrubview.js
+++ b/src/skrubview/_data/templates/skrubview.js
@@ -32,11 +32,27 @@ function selectAllCols(reportId) {
     updateSelectedColsSnippet(reportId);
 }
 
+
 function copyTextToClipboard(elementID) {
-    var elem = document.getElementById(elementID);
+    const elem = document.getElementById(elementID);
     elem.setAttribute("data-is-being-copied", "");
-    navigator.clipboard.writeText(elem.textContent);
-    setTimeout(function() {
+    if (navigator.clipboard) {
+        navigator.clipboard.writeText(elem.textContent || "");
+    }
+    else {
+        const selection = window.getSelection();
+        if (selection == null) {
+            return;
+        }
+        selection.removeAllRanges();
+        const range = document.createRange();
+        range.selectNodeContents(elem);
+        selection.addRange(range);
+        document.execCommand("copy");
+        selection.removeAllRanges();
+    }
+
+    setTimeout(() => {
         elem.removeAttribute("data-is-being-copied");
     }, 200);
 }