Embeds do not respect height of folded callouts

Bug reports
1

Steps to reproduce

  1. Create a callout in a separate file.
  2. Ensure the callout can be folded (eg, [!info]+ or [!info]-).
  3. Add a block-id to the callout.
  4. Embed the callout in a second file.
  5. Click the callout title to fold and unfold the callout.

Did you follow the troubleshooting guide? [Y/N]

Yes

Expected result

In the second note, the embed’s height should follow the height of the callout as it’s folded or unfolded, shrinking and growing to fit.

Actual result

The embed’s height fails to adjust to the smaller content, leaving a lot of empty space inside the embed. The embed’s height only changes if the embed itself contains at least the height of min-height that is dynamically set inline on each embed.

Environment

SYSTEM INFO:
Obsidian version: v1.4.6
Installer version: v1.4.5
Operating system: Windows 10 Home 10.0.19045
Login status: logged in
Catalyst license: vip
Insider build toggle: on
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none

Additional information

Pictured:

  • First note on the right, containing the callout to be embedded. The callout has been set up to be unfolded by default ([!info]+).
  • Second note on the left, containing the embedded callout in the folded state after clicking on the callout title. There is a significant amount of white space below the folded callout despite there being nothing else in the embed.

image
image1275×614 31.7 KB

As noted above, the issue seems to originate from the .markdown-preview-sizer have an inline style added that sets the min-height of each embed. While this helps to create a minimum amount of space for each embed, this can also result in an extraordinary amount of wasted space when the embeds have less information displayed than what would fill up the min-height available.

In cases like the note the above screenshot is clipped from, this results in at least 1700px of wasted vertical space (more in multi-pane formats like this) spread across the five callouts I have within the file.

While the fix is relatively simple through a CSS snippet or directly in the theme by unsetting the element’s min-height property, it’s not obvious what’s going on or why this behavior occurs. That this style is applied inline also forces anyone trying to override the style to use !important, or the style change will fail.

Though I appreciate the dynamic nature of embeds’ sizes when there’s a significant amount of information to be displayed, this behavior is less useful when attempting to embed small amounts of information without the use of external plugins.

1 Like