Tweaks in rendering and buttons

web/styles/editor.scss

@@ -471,7 +471,7 @@
     overflow-y: auto;
     border: 1px solid var(--editor-directive-background-color);
     border-radius: 5px;
-    white-space: wrap;
+    white-space: normal;
     position: relative;
 
     ul,
@@ -520,21 +520,27 @@
       background-color: var(--editor-code-background-color);
     }
 
-    // Button bar
-    &:hover .button-bar,
-    &:active .button-bar {
+    // Only show the button bar on hover on non-touch devices
+    &:hover .button-bar {
       display: block;
     }
 
+    // Always show button bar on touch devices
+    @media (hover: none) and (pointer: coarse) {
+      .button-bar {
+        display: block !important;
+      }
+    }
+
     .button-bar {
       position: absolute;
-      right: 10px;
-      top: 10px;
+      right: 0;
+      top: 0;
       display: none;
       background: var(--editor-directive-background-color);
       padding-inline: 3px;
-      padding-bottom: 1px;
-      border-radius: 5px;
+      padding: 4px 0;
+      // border-radius: 0 5px;
 
 
       button {
@@ -545,6 +551,10 @@
         margin-right: -8px;
       }
 
+      button:last-of-type {
+        margin-right: 2px;
+      }
+
     }
   }
 

web/styles/theme.scss

@@ -101,7 +101,7 @@ html {
   --editor-frontmatter-background-color: rgba(255, 246, 189, 0.5);
   --editor-frontmatter-color: var(--subtle-color);
   --editor-frontmatter-marker-color: #89000080;
-  --editor-directive-background-color: rgb(233, 233, 233, 50%);
+  --editor-directive-background-color: rgb(238, 238, 238);
   --editor-directive-border-color: #0000000f;
   --editor-directive-color: #5b5b5b;
   --editor-directive-info-color: var(--subtle-color);