jdanielmourao/obsidian-sanctum

[BUG] Graph view text (settings) overlap with eachother

Closed this issue · 11 comments

Describe the bug
The text in the graph views is weird

To Reproduce

  • Go in the graph view
  • Open the graph setting

Expected behaviour
The text should be normal

Screenshots
image

Version [Desktop or Mobile]:
Linux (AUR version)

Editor
New CM6 editor

Additional context
Tried with other themes, but it doesn't apply

Are you able to inspect the element, and tell me which classes are applying to body? Should be at the top of the element tree

Here is the code. I think that it's all that should have an impact. I will try to look into it :
``element.style {
}
.graph-control-section-header {
font-weight: 600;
font-size: 14px;
color: var(--text-normal);
}

<style> *, *::before, *::after { box-sizing: border-box; } * { box-sizing: border-box; } * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-bg); } user agent stylesheet header { display: block; } <style> .graph-controls .tree-item-self { font-size: var(--font-scale-00); padding-left: 0; } .tree-item-self { display: flex; align-items: flex-start; padding: 2px 6px 2px 20px; border-radius: 3px; color: var(--text-muted); } style attribute { padding-top: 22px; --editor-font-size: 16px; } <style> .theme-light.custom-l, .theme-light.sanctum-coldgrey, .theme-light.sanctum-tide, .theme-light.sanctum-hearth, .theme-light.sanctum-moss, .theme-light, .theme-light.sanctum-light, .theme-light.gruvbox { --color-hover: var(--color-primary-2); --color-border-1: var(--color-primary-2); --color-border-2: var(--color-primary-3); --color-accent: rgb(var(--color-accent-l)); --background-primary: var(--color-primary-1); --background-primary-alt: var(--color-primary-0); --background-secondary: var(--color-primary-1); --background-secondary-alt: var(--color-primary-1); --background-modifier-border: var(--color-primary-5); --background-modifier-form-field: rgba(0, 0, 0, .05); --background-modifier-form-field-highlighted: var(--color-primary-2); --background-modifier-box-shadow: rgba(0, 0, 0, 0.2); --background-modifier-success: #8c8d3b; --background-modifier-error: #f15148; --background-modifier-error-rgb: 196, 46, 39; --background-modifier-error-hover: #f15148; --background-modifier-cover: var(--color-primary-2); --text-normal: var(--color-primary-8); --text-muted: var(--color-primary-7); --text-faint: var(--color-primary-5); --text-accent: var(--color-accent); --text-on-accent: var(--color-primary-0); --text-accent-hover: #d66c1e; --text-error: #f15148; --text-error-hover: #f15148; --text-highlight-bg: var(--color-accent); --text-highlight-bg-active: var(--color-accent); --text-selection: var(--txt-sel); --interactive-normal: var(--color-primary-2); --interactive-hover: var(--color-primary-2); --interactive-accent: var(--color-accent); --interactive-accent-rgb: var(--color-primary-2); --interactive-accent-hover: var(--color-primary-3); --interactive-success: #8c8d3b; --scrollbar-bg: rgba(0, 0, 0, 0.05); --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1); --highlight-mix-blend-mode: darken; }``

Here is the code. I think that it's all that should have an impact. I will try to look into it : ``element.style { } .graph-control-section-header { font-weight: 600; font-size: 14px; color: var(--text-normal); }

<style> *, *::before, *::after { box-sizing: border-box; } * { box-sizing: border-box; } * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-bg); } user agent stylesheet header { display: block; } <style> .graph-controls .tree-item-self { font-size: var(--font-scale-00); padding-left: 0; } .tree-item-self { display: flex; align-items: flex-start; padding: 2px 6px 2px 20px; border-radius: 3px; color: var(--text-muted); } style attribute { padding-top: 22px; --editor-font-size: 16px; } <style> .theme-light.custom-l, .theme-light.sanctum-coldgrey, .theme-light.sanctum-tide, .theme-light.sanctum-hearth, .theme-light.sanctum-moss, .theme-light, .theme-light.sanctum-light, .theme-light.gruvbox { --color-hover: var(--color-primary-2); --color-border-1: var(--color-primary-2); --color-border-2: var(--color-primary-3); --color-accent: rgb(var(--color-accent-l)); --background-primary: var(--color-primary-1); --background-primary-alt: var(--color-primary-0); --background-secondary: var(--color-primary-1); --background-secondary-alt: var(--color-primary-1); --background-modifier-border: var(--color-primary-5); --background-modifier-form-field: rgba(0, 0, 0, .05); --background-modifier-form-field-highlighted: var(--color-primary-2); --background-modifier-box-shadow: rgba(0, 0, 0, 0.2); --background-modifier-success: #8c8d3b; --background-modifier-error: #f15148; --background-modifier-error-rgb: 196, 46, 39; --background-modifier-error-hover: #f15148; --background-modifier-cover: var(--color-primary-2); --text-normal: var(--color-primary-8); --text-muted: var(--color-primary-7); --text-faint: var(--color-primary-5); --text-accent: var(--color-accent); --text-on-accent: var(--color-primary-0); --text-accent-hover: #d66c1e; --text-error: #f15148; --text-error-hover: #f15148; --text-highlight-bg: var(--color-accent); --text-highlight-bg-active: var(--color-accent); --text-selection: var(--txt-sel); --interactive-normal: var(--color-primary-2); --interactive-hover: var(--color-primary-2); --interactive-accent: var(--color-accent); --interactive-accent-rgb: var(--color-primary-2); --interactive-accent-hover: var(--color-primary-3); --interactive-success: #8c8d3b; --scrollbar-bg: rgba(0, 0, 0, 0.05); --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1); --highlight-mix-blend-mode: darken; }``

I'm looking for the what's applied to body in the Elements tab, not the Styles tab, which is where you got that from. Should be more to the left, or you may just need to give some more space to the dev tools window.

I have the same problem since a long time. On both the global graph as well as small sidebar local graph.

The problem seems to go and leave. Its weird why. It was good last time I checké, then it's weird again

The problem seems to go and leave. Its weird why. It was good last time I checké, then it's weird again

Yes, it is pretty random for me too.
Sometimes it is there, sometimes it is not.

Can I assume you're both using Linux? So far, it seems like it usually affects some linux users.

Can I assume you're both using Linux? So far, it seems like it usually affects some Linux users.

I use Linux and the Android version of the app (phone and IdeaPad Duet), only on Linux does I have this bug.
It is also worth noting that this bug come and go, sometimes a restart of the app will do it, sometimes multiple restarts.

I have also looked at the CSS, nothing that should cause this issue as far as I know. Maybe a problem with some font overlapping (First choice and second ?)

I'm looking for what's applied to the body in the Elements tab, not the Styles tab, which is where you got that from. Should be more to the left, or you may just need to give some more space to the dev tools window.

Here it is (I think) :
image

Yeah, that's it. 🙂 I'm almost certain that linux doesn't like a transparency value in the background colour, specifically in graph controls, for some reason. When I used a blur effect, it would bug almost consistently. I'll try changing that targetting linux machines, and see if it fixes it.

This should now be fixed in version 0.6.3