Fix the trix toolbar for smaller screens

Signed-off-by: Miquel Sabaté Solà <mikisabate@gmail.com>

1 files changed, 56 insertions, 0 deletions

diff --git a/app/assets/stylesheets/comment.css b/app/assets/stylesheets/comment.css
index 4472c62..af2c897 100644
--- a/app/assets/stylesheets/comment.css
+++ b/app/assets/stylesheets/comment.css
@@ -25,3 +25,59 @@
 .comment .comment-header .comment-header-actions {
     flex-grow: 0;
 }
+
+/*
+ * Tweaks on Trix's toolbar in the comment section:
+ *   - Make it work on smaller screens.
+ *   - Hide the history tools on the desktop.
+ */
+
+trix-toolbar .trix-button-row {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+}
+
+trix-toolbar .trix-button-group-spacer {
+    display: none;
+}
+
+trix-toolbar .trix-button-group:not(:first-child) {
+    margin-left: 0px;
+}
+
+trix-toolbar .trix-button-group {
+    border: none;
+}
+
+/*
+ * Display the history-tools for small screens, where the undo/redo experience
+ * might actually be bad.
+ */
+trix-toolbar .trix-button-group--history-tools {
+    display: flex;
+}
+
+@media (min-width: 600px) {
+    trix-toolbar .trix-button-row {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    trix-toolbar .trix-button-group-spacer {
+        display: none;
+    }
+
+    trix-toolbar .trix-button-group:not(:first-child) {
+        margin-left: 0px;
+    }
+}
+
+@media (min-width: 850px) {
+    /* I actually don't like the history-tools parts on the desktop. */
+    trix-toolbar .trix-button-group--history-tools {
+        display: none;
+    }
+
+    trix-toolbar .trix-button-group:not(:first-child) {
+        margin-left: 10px;
+    }
+}