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*/
}

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