Embeds do not respect height of folded callouts

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.

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.

2 Likes

Steps to reproduce

  1. Create a note with a callout e.g.

Title: Note 1
> [!info]+
> test

  1. Embed the note (or section) in another note e.g.

Title: Note 2
![[Note 1]]

  1. Fold the embedded callout

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

Yes, bug is reproducible in sandbox mode

Expected result

The fold will also fold the purple quote border to the left of the callout, e.g.

Actual result

When you fold the callout, the quote border doesn’t fold along with the note.


with text below the callout, the gap is still there

On larger callouts this ends up leaving a large whitespace gap

Environment

SYSTEM INFO:
Obsidian version: v1.4.14
Installer version: v1.4.14
Operating system: #1 SMP PREEMPT_DYNAMIC Sat, 07 Oct 2023 08:14:55 +0000 6.5.6-arch2-1
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none


Additional information

1 Like

I got the same result in the sandbox vault.

SYSTEM INFO:
	Obsidian version: v1.4.14
	Installer version: v1.4.13
	Operating system: Darwin Kernel Version 22.3.0: Thu Jan  5 20:53:49 PST 2023; root:xnu-8792.81.2~2/RELEASE_X86_64 22.3.0
	Login status: logged in
	Catalyst license: none
	Insider build toggle: off
	Live preview: on
	Legacy editor: off
	Base theme: dark
	Community theme: none
	Snippets enabled: 0
	Restricted mode: off
	Plugins installed: 0
	Plugins enabled: 0

RECOMMENDATIONS:
	none