Added editor gutter overlaps and obscures editor content

Custom CSS & Theme Design
, ,
1

Dear Obsidian Devs,

I think I’ve found a UI bug with gutters on v1.0.

Steps to reproduce

  1. Create new vault with a simple git repository setup (or reuse an existing one).
  • it doesn’t need to be able to push. just local commits and branch setup suffice
  • i.e. git init && echo "hello" > README.md && git add README.md && git commit -m "1st"
  1. Install Obsidian Git plugin.
  2. Install the main.js and styles.css from v4.zip (development branch of git-annotate in Obsidian) into .obsidian/plugins/obsidian-git/{main.js,styles.css}
  3. Restart Obsidian
  4. Activate line author information (e.g. via Command Palette “Toggle line author information”.
  5. (optional) Deactivate line numbers, if they are being shown.
  6. Open README.md and look at the line gutters showing the line author information.

Expected result

What I saw before v1.0:
image

Actual result

What I see with v1.0:
image

Environment

  • Operating system: Linux, Ubuntu
  • Debug info:
    SYSTEM INFO:
    Obsidian version: v1.0.0
    Installer version: v1.0.0
    Operating system: #144-Ubuntu SMP Tue Sep 20 11:00:04 UTC 2022 5.4.0-128-generic
    Login status: not logged in
    Insider build toggle: off
    Live preview: on
    Legacy editor: off
    Base theme: light
    Community theme: none
    Snippets enabled: 0
    Restricted mode: off
    Plugins installed: 1
    Plugins enabled: 1
    1: Obsidian Git v2.6.0

RECOMMENDATIONS:
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

I created and added a new CodeMirror6 gutter and before v1.0 it was shown correctly. However, with v1.0 it only renderes correctly if the line numbers are also rendered.

Otherwise it falsely has a too large margin on the left side, which makes it overlap with the actual editor content. It turns out, that by deactivating the margin-left style on the .cm-gutters fixes the spacing.

v1.0-problem-gutter-spacing-1

Could you a look into it? It feels like, the margin-left property shouldn’t be there in the first place, as it messes things up. Adding a simple CM6 gutter shouldn’t lead to this problem.

Interestingly, if one activates the line numbers - everything works fine and as intended. Deactivating the margin-left now even adds extra space on the left. In this perspective, it seems like having it turned off is the right thing.

v1.0-problem-gutter-spacing-2

What do the devs think about this? I would be nice, if adding a gutter consistently produced the correct results.

I don’t think, that my gutter element styling messes these things up, as the above happens with the container element and not the gutter elements themselves. I use these styles .

Kinds, Swnt

1 Like
2

The following workaround seems to actually produce good results:

/* HACK for v1.0 Obsidian */
.markdown-source-view.mod-cm6 .cm-gutters {
    margin-left: unset !important;
}

Without line numbers:
image

With line numbers:
image

Without line authoring but with line numbers:
image

The only drawback is, that deactivating the plugin removes the extra space on the left on the last image - even though no line-authoring is shown.

This would however raise the question, why the margin-left was set in the first place and what it’s actual reason is.

3

we don’t take bug reports involving plugins or css. Contact the author of that plugin.

These kind of discussions are better done on discord in plugin dev or appearance.

6

I am actually developing this feature of the plugin and I am very sure, that the cause of this problem is not in the plugin itself.

I already posted this in plugin-dev previously: Discord

Either way. I suspect, that this is a bug which many plugin-developers will come across when they want to add information via gutters. But rather than the plugin developers making each their own hacked workarounds, it would be better if the root cause could be resolved.

That’s why I posted here. What do you think?

7

I see, taht this has been moved to Developers & API.

What is the current priority for this issue? Few weeks? Few months? Not in discussion?