Extra bottom padding at each page and popover embedded content

In markdown preview mode, there is an extra green region with 438px bottom padding.

I tried to modify the .markdown-preview-sizer and .markdown-preview-section > div to set the padding-bottom, but they only change the blue region. div.markdown-preview-sizer.markdown-preview-section does not work either. How should I select the green region?

A similar problem occurs in popover where there is some embedded note.

![embed|690x304]

The div.markdown-preview-view encloses the embeded content and adds some extra bottom padding.

If I open the note in a page, the embedded content does not have this extra padding at bottom.

Here are my current css for the popover. Why doesn’t the popover inherit the correct behavior from the page? It’s just really weird to see extra white lines when you have embedded contents in a popover. Any help will be appreciated!

.popover,
.popover.hover-popover {
  min-height: 40px;
  box-shadow: 0 20px 40px var(--background-modifier-box-shadow);
  pointer-events: auto !important;
  border: 1px solid var(--background-modifier-border);
}
.popover.hover-popover {
  max-height: 40vh;
}
.popover .markdown-embed-link {
  display: none;
}
.popover .markdown-embed .markdown-preview-view {
  padding-top: 15px;
  padding-bottom: 30px;
}
.popover.hover-popover .markdown-embed .markdown-embed-content {
  max-height: none;
}
.popover.mod-empty {
  padding: 20px 15px 20px 20px;
  color: var(--text-muted);
}

.popover .markdown-embed .markdown-preview-view img {
  margin: 0 auto;
  max-width: 100%;
}
1 Like

As no-one could help you here, you might have more luck asking for help on Discord in #css-themes with a link to this post.

hey,
i have the same annoying problem.
Did you have any luck with the margin inside the popover preview ?
your help would be appreciated.

This is very late, but I hope it still helps. I was able to get rid of the bottom padding in each page (including embedded pages) using the following css snippet. If you try it and issues are still present, please let me know.

.markdown-preview-sizer, .markdown-preview-section {
  padding-bottom: 0px !important; /*Gets rid of bottom padding on each page*/
  min-height: 0px !important; /*Useful for embedded pages*/
}
2 Likes

Thank you very much! Here’s a little addition.

.markdown-preview-view .markdown-embed, .markdown-preview-view table, .markdown-preview-sizer, .markdown-preview-section  {
  padding-bottom: 0px !important; /*Gets rid of bottom padding on each page*/
  margin: 0 !important; /* Gets rid of margins on the embedded tables */
  min-height: 0px !important; /*Useful for embedded pages*/
  height: auto !important; /* Because min-auto wasn't enough for new Live Preview */
}
.markdown-preview-view .markdown-preview-view {
  padding-bottom: 0px !important; /*Gets rid of bottom padding on embedded content in popovers*/
}
1 Like

I tried both code examples above, but none of them seem to remove the padding at the bottom in the popup-pages:

What is still missing?

with my CSS:
.popover.hover-popover.is-loaded {
position: absolute;
z-index: var(–layer-popover);
transform: scale(0.8); /* makes the content smaller */
max-height:55vh;
max-width:40vw;
min-height:600px;
min-width:750px;
overflow: hidden;
padding: 15px 20px 10px 20px;
}
I can only change the outer window size, the scrollable aera stay the same.
How can I change that too?

Stefan

Hey @StefanS. Sorry this is about a week late.

To change the inner window size, you have to target .popover.hover-popover .markdown-embed in your css. I’ve made the following changes to your css to reflect this, along with a couple of tweaks:

:root {
--vh-height: calc(55vh - 15px - 10px); /* just a variable I define to use later; I subtracted the top 15px and bottom 10px paddings from 55vh*/
}

/* Tweaks to your provided css: */
/* targeting .popover.hover-popover is sufficient */
/* also, I've removed the things already defined by default in obsidian's css ( position: absolute; z-index: var(--layer-popover); overflow: hidden)*/
.popover.hover-popover {
    transform: scale(0.8); /* makes the content smaller */
    max-height: max(55vh,600px); /*max() chooses whichever is larger between the two values*/
    max-width: max(40vw,750px);
    min-height: min(55vh,600px); /*min() chooses whichever is smaller between the two values*/
    min-width: min(40vw,750px);
    padding: 15px 20px 10px 20px;
}

/* To change the scrollable area: */
.popover.hover-popover .markdown-embed {
   height: 500px; /*can be adjusted to any desired value, with limits placed by min and max height*/
   min-height: min(var(--vh-height),575px); /*note that 575px is calculated from 600px - 15px (top padding) - 10px (bottom padding)*/
   max-height: max(var(--vh-height),575px);
}

I hope this helps!

1 Like

Hey @Salamander23,

thank you for your reply!
Still so much to learn about CSS…

When I apply your code, the popup window seems to be smaller than before. As if it would ignore the width 750px command.

What I don’t understand (and cannot tell if that might be the reason), what the ‘40vw’ says in this line:
min-width: min(40vw,750px);
what is that for a dimension?

And I have another question / problem:

This code seems to define the height of the embedded text from another note:
.markdown-preview-view {
min-height: 300px;
}

Problem is, the windows with the embedded content seems always to be 300px high.

I’d like to have it adjust to the amount of text embedded, so not that much space is wasted:

How can I get rid of the empty lines in the embed?

1 Like

if what you want is just to remove the min-height, you can try:

.markdown-preview-view{
min-height: none;
}

Great, that worked!
I now havee:

.markdown-preview-view {
	min-height: none;
	max-height: 300px;
}

That did the job!

1 Like

To answer your earlier question, you are right about the 40vw being the reason for the smaller width of the popup window.

40vw just means 40% of the viewport width (i.e. the width of the entire obsidian window) (40vh is the same thing, but as a % of viewport height; vmax uses whichever of the two dimensions is larger, and vmin uses whichever of the two is smaller). The reason that the popup window appears smaller than before is because I had set min-width: min(40vw,750px), and it just so happens that 40% of the width your obsidian window was smaller than 750px, so the result is that the width was set to 40vw, ignoring 750px since it’s the larger value.

To resolve this, you can try increasing the value of 40vw in the lines min-width: min(40vw, 750px) and max-width: max(40vw, 750px) while you have obsidian in fullscreen. Any vw value greater than or equal to 750px/(your screen width in px) * 100 is likely to work better for you. Just calculate that and use it instead of 40vw and I believe you should be fine.

Some more explanation is below if you’re interested:

To get your desired behavior for popover size, that can depend on the size of the screen you’re working with (especially when using units like vw or vh).

If the size of your computer screen is such that 40% of your screen’s width is less than 750px (i.e. your screen width is less than 1875px (750px/.40)), it technically doesn’t make sense to set min-width: min(40vw, 750px), since the css will always choose 40vw even if your obsidian window is fullscreen.

I just used 40vw and 750px since they were numbers you provided in your css earlier, when you set the max-width: 40vw and min-width: 750px. In my mind, that only makes sense if the max-width value of 40vw has the potential to be larger than the min-width value of 750px based on your screen size.

2 Likes

Thanks a lot for the generous explanations! :pray:

Thank you for the question and help in this thread. I finally find the answers to change the size of the markdown-beded.

for the size of markdown-embed, you may also interest in the progress of the fix of this bug:

What I observed is that the direct reason for this bug is that the min-height attribute of markdown-embed is not updated after changing the size of the pane.

1 Like