Wider tables and Mermaid diagrams

Tricks & Techniques
1

I’m loving the mermaid plug, but often the diagrams are a bit too small with the default editor width. The height unfortunately does not auto-adjust, but it does on a refresh.

So I came up with this space-style:

/* Make Mermaid diagrams wider */
@media(min-width: 1400px) {
  .sb-fenced-code-iframe {
    /* Desired width, 60vw = 60% of the window's width */
    min-width: 60vw !important;
    iframe {
       /* Nudge the iframe over to the left
          It starts at the editor's left, the gap on either side is the same size
          So we just want to get the size of one of the gaps
       */
      margin-left: calc((100vw - var(--editor-width)) / -2 + 20vw) !important;
    }
  }
}

I chose to only apply it when the window width is at least 1400px. If you choose a wider width than 60vw, this limit can be lower (up to 800px for the default editor width).

If you change the 60vw, you should also change the 20vw in the margin-left. That should be half of 100vw - <your width>.

Silly example:

image
image1694×186 6.91 KB

4 Likes
2

Tables are sometimes also a bit narrow, so I added this (very similar, just different dimensions):

@media(min-width: 1600px) {
  .cm-line:has(table) {
    min-width: 50vw !important;
    margin-left: calc((100vw - var(--editor-width)) / -2 + 25vw) !important;
  }
}

Edit: simplified it a bit, it now also works for Live Queries that render tables. :slight_smile: