The position of the metadata container is a bit incorrect

Bug reports
, ,
1

Steps to reproduce

In live preview mode,

  1. Set the background color of .cm-sizer to green.
  2. Set the background color of .metadata-container to red.
  3. Set the background color of .cm-contentContainer to red.

In reading mode,

  1. Set the background color of .metadata-container to red.
  2. Set the background color of .mod-header.mod-ui to green.

Here are the relevant CSS:

.markdown-source-view .metadata-container {
    background: red;
}

/* live preview mode part */
.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer {
    background: green;
}

.markdown-source-view.mod-cm6 .cm-contentContainer {
    background: red;
}



/* reading mode part */
.mod-header.mod-ui {
    background: green;
}

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

Y

Expected result

You will notice that the two red rectangles are not aligned. Specifically, the .metadata-container is positioned to the left.

I have attached the screenshot at the end of the document.

Actual result

The red square and the green square perfectly overlap. (see screenshorts)

Environment

SYSTEM INFO:
Obsidian version: v1.8.7
Installer version: v1.6.7
Operating system: Darwin Kernel Version 24.3.0: Thu Jan 2 20:24:23 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T8122 24.3.0
Login status: not logged in
Language: en
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none

Additional information

This makes implementing complex CSS alignments related to it very difficult.

Live preview mode:

image
image1728×1314 175 KB

Reading mode:

image
image1718×1074 71.5 KB

2

You’re right, but if this subtle things don’t break anything else than some aesthetics (which aren’t visible by default), then I’d care less.

If you’re designing a theme and the exact placement of frontmatter is part of your design, then you’ll find ways to correct it.

I’m glad the developers of Obsidian focus foremost on important things, because details are always optional and not essential.

3

I’m not sure if it matters, but you should test this with an updated installer version as well as the updated Obsidian version.

4

I completely agree.

My approach is to promptly report anything I think could be improved. Deciding whether to prioritize fixing this bug is entirely up to the development team.