Header embed has code block item that overflows outside the bound of the Pane and adds a horizontal scroll bar

[GitMurf]

Somewhat related to #71 this issue seems to be tied to Header embeds that have a Search "query" code block with a string that spans longer than the window size. On first load it is expanded out within the Pane which adds a horizontal scroll bar on the pane itself. If you simply update the ![[embed]] by adding a space for example after it to "re-render" it, then it will adjust and put the scroll bar within the rendered element itself and not make the pane itself horizontally scroll. See video for demonstration.

Note this is with the default theme and zero custom CSS so that isn't the issue.

wib8UKoXol.mp4

[ozntel]

Do you have the sample block, which causes this issue? I would need to try with custom CSS.
Or if you have a chance, you can try overflow-x: scroll on available widget classes and let me know which one solves. I will then include in the plugin css.

[GitMurf]

I will give it a try when I get back to my computer later today. Thanks.

[GitMurf]

Ok so first off, adding the following "fixes" the issue... kind of. It gets the job done but ultimately I don't think is the right solution as I think something just is happening weird on initial load with your plugin that isn't rendering as you'd expect. See below for more details.

Here is the css that "fixes" the issue by stopping it from horizontally scrolling the entire pane (I don't think its the "right" solution though based on my further details explained below):

div.oz-transclusion-widget pre {
    overflow-x: scroll;
}

Here is what is on my [[Weekly Review]] page: *Note below I used single quotes instead of back ticks for the query code block so that it didn't render oddly here on github.

### TODO Items for Friday [[2021-10-08]]

'''query
(file:TASK_2021_10_08 task-todo:"[ ]") OR ((--/Due Date: .*\[\[2021-10-08\]\].*/ OR --/due date: \[[0-9, -]*2021-10-08[0-9, -]*\]/) task-todo:"[ ]") OR (file:2021-10-08 task-todo:"[ ]") OR (task-todo:"2021-10-08")
'''

Here is what is on my daily note page that transcludes my header embed from the [[weekly review]] page: ![[Weekly Review#TODO Items for Friday 2021-10-08]]

What is I think causing the issue is that on initial loading of Obsidian to my daily notes page here is the HTML structure of your transclusion for a code block. See how the pre element has no class. Also note how the code element has the "line-numbers" class.

Now look at it after I simply add and remove a "space" after the ![[embed]] text to force your plugin to re-render it. This fixes the scrollbar issue and you'll notice the pre element now has classes and that the "line-numbers" class moved from the code element up into the pre element.

Here is what it renders like on startup BEFORE editing the ![[embed]] line to force it to re-render. Notice the line number is missing.

Here is how it renders AFTER editing the ![[embed]] line:

[ozntel]

I included the CSS for overflow to ensure that it doesn't break the preview.

The issue you mentioned shouldn't have an effect on renders. Especially queries won't be included in the transclusion renders.