Adding margin to header breaks click zone of header if it is the last line

Steps to reproduce

Create a file with the following code:


###### h6

## h2

###### Other

Create a snippet with this code:

.markdown-source-view.mod-cm6 .cm-content {
  & > .HyperMD-header-1 {
    color: var(--color-accent);
  }

  .HyperMD-header-1,
  .HyperMD-header-2,
  .HyperMD-header-3,
  .HyperMD-header-4,
  .HyperMD-header-5,
  .HyperMD-header-6 {
    &:not(:first-child) {
      margin-top: var(--header-spacing) !important;
    }
  }
}

Try clicking towards the end of the text on the last header line.

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

Yes. Reproducible with no plugins, but does require one specific line of snippet code.

Expected result

Successful cursor placement.

Actual result

Hard to actually get the cursor to be placed on the line.

Environment

SYSTEM INFO:
	Obsidian version: v1.5.8
	Installer version: v1.4.14
	Operating system: Darwin Kernel Version 23.3.0: Wed Dec 20 21:30:44 PST 2023; root:xnu-10002.81.5~7/RELEASE_ARM64_T6000 23.3.0
	Login status: not logged in
	Insider build toggle: off
	Live preview: on
	Base theme: dark
	Community theme: Border v1.6.2
	Snippets enabled: 4
	Restricted mode: off
	Plugins installed: 9
	Plugins enabled: 8
		1: Commander v0.5.1
		2: Advanced URI v1.16.1
		3: Grab Bag v1.4.0
		4: Obsidian Git v2.20.6
		5: Omni Switcher v1.4.0
		6: Style Settings v1.0.7
		7: Paste URL into selection v1.7.0
		8: Protect Note v1.3.0

RECOMMENDATIONS:
	Custom theme and snippets: for cosmetic issues, please first try updating your theme and disabling your snippets. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community theme and snippets.
	Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community plugins.

Additional information

Video showing the bug, cursor clicks are indicated: https://imgur.com/a/cbZj9hD

I can’t reproduce any clicking issues using only this snippet in the default theme.

Your debug info and screen recording seem to indicate you are using Border. It could be Border or another CSS snippet causing the issue.


As for the margin-top, I’d considering using padding-top in the editor.

From Licat in March '22:

The editor measures and predicts where elements are located on the page so that when you scroll around, parts of the page that’s out of view can be removed to keep the editor performant. Using margins completely breaks the ability for the editor to do that because margins don’t behave predictably due to the margin collapse algorithm

Source: Discord #theme-dev channel.

and in another post:

Margins break the editor, you need to use padding instead

Source: Discord #general.